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本 书 是 一 本 学 习 HTMLS 的 宝典 ， 以 实际 项 目 为 驱动 ， 内 容 全 面 ， 讲 
解 通 俗 ， 适 合 各 层次 的 学 习 者 。 人 全书 分 为 14 W, BRAR HEHHE T 
HTMLS 的 基本 概念 和 基本 功能 ， 包 括 地 理 位 置 定位 、 本 地 存储 、 离 线 存 
储 、WebSocket、Canvas、 表 单 等 ， 而 且 对 每 一 个 概念 的 讲解 都 配备 了 恰 如 
其 分 的 示例 和 代码 ， 让 读者 通过 动手 实践 ， 切 吴 体 会 到 这 些 概念 的 含义 和 
价值 。 本 书 前 半 部 分 结合 实例 深入 讲解 了 HTMLS 在 PC 靖 的 大 放 异 彩 的 功 
能 ， 后 半 部 分 则 深入 讲解 HTMLS 在 移动 问 的 应 用 开发 知识 ， 系 统 地 讨论 
了 离线 存储 、 本 地 存储 和 HTMLS Canvas 游戏 等 主题 。 

本 书 适合 各 个 层次 的 前 总 开发 人 员 学 习 ， 无 论 是 出 于 工作 需要 ， 还 是 
好 奇 心 的 驱使 ， 只 要 你 想 深 入 理解 HTML5， 本 书 都 会 让 你 大 有 收获 。 
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我 们 生活 的 时 代 


2015 年 ， 国 务 院 提 出 “互联 网 +” 行 动 计划 ， 推 动 了 互联 网 产业 进一步 发 展 。 对 于 互 
联网 从 业者 来 说 ， 这 是 一 个 最 好 的 时 代 ， 也 是 一 个 最 坏 的 时 代 。 互 联网 产业 的 深度 发 展 ， 尤 
其 是 移动 互联 网 产业 的 飞速 发 展 ， 为 从 业者 带 来 卫 所 未 有 的 机 过， 但 也 带 来 了 前 所 未 有 的 
挑战 。 每 天 部 有 成 于 上 万 的 互联 网 产品 投入 市 场 ， 激 烈 的 苋 争 一 刻 人 不信。 前 器 工 程 师 作为 互 
联网 产业 中 的 排头 兵 ， 永 远 冲 在 互联 网 产品 开发 的 第 一 线 ， 我 们 创造 用 户 看 得 见 措 得 看 的 部 
分 ， 我 们 创造 产品 的 用 户 体 验 和 价值 ， 我 们 任 重 而 道 远 。 


用 产品 去 改变 世界 


互联 网 产业 在 不 断 发 展 ， 用 户 面 对 的 “界面 ”也 随 之 不 断 变化 ， 从 20 世纪 80 ERAI 
DOS 字符 界面 ， 到 Windows 图 形 界面 ， 到 浏览 器 界面 ， 再 到 当前 的 移动 终端 界面 。 界 面 的 
多 样 化 决定 了 我 们 已 进入 一 个 用 户 体 验 的 时 代 ， 以 前 的 产品 以 功能 为 核心 ， 而 现在 ， 用 户 体 
验 束 是 一 切 。 这 就 意味 着 ， 我 们 脑海 中 关于 软件 的 理解 需要 更 新 ， 软 件 已 经 不 能 再 单纯 被 当 
作 程 序 或 者 系统 去 看 待 ， 而 是 应 该 从 设计 伊始 就 被 当 作 一 个 产品 去 打造 。 

产品 ， 就 是 一 系列 符合 用 户 需 求 的 功能 的 组 合 。 产 品 思 维 是 互联 网 思维 中 最 重要 的 利 
右 ， 互 联网 时 代 通 过 产品 来 改变 世界 ， 实 现 梦 想 。 随 着 互联 网 的 发 展 ， 我 们 可 以 观察 到 ， 产 
品 的 功能 越 来 越 趋 于 同 质 化 ， 而 产品 的 UI 设计 与 前 端 开发 则 成 了 表达 个 性 化 和 差异 化 的 主 
战场 ， 因 为 这 两 个 领域 可 以 体现 出 美妙 的 视觉 表达 和 交互 设计 水 平 。 

互联 网 比较 传统 媒体 最 大 的 特点 就 是 交互 ， 而 友好 的 交互 才能 让 用 户 产生 好 的 用 户 体 
验 ， 企 业 越 来 越 重视 用 户 体 验 ， 从 技术 上 讲 ， 就 是 越 来 越 重 视 UI 设计 和 前 端 开发 。 

前 端 开发 技术 发 展 经 历 了 三 个 阶段 : 

第 一 阶段 是 Web 1.0 时 代 的 以 内 容 为 主 的 网 页 ， 主 流 技 术 是 HTML4 和 CSS2; 

第 二 阶段 是 Web 2.0 时 代 的 Ajax 技术 的 应 用 ， 热 门 技术 是 JavaScript/DOM/ 异 步 数据 
请 求 ; 

第 三 阶段 是 HTML5+CSS3 技术 的 应 用 ， 这 两 者 相辅相成 ， 使 前 端 技术 进入 了 一 个 轿 
新 的 时 代 。 

HTML5+CSS3 Saxe JHE Web 应 用 的 基础 ， 它 们 可 以 让 网 站 更 易 开 发 、 更 易 维护 、 更 
具 用 户 友好 性 。 同 时 借助 许多 基于 HTML 5 的 移动 开发 框架 可 以 让 开发 任务 变 得 更 加 简单 ， 


更 好 地 进行 移动 Web JF. HTMLS 通过 代码 方式 ， 增 加 区 互 功能 ， 同 时 结合 后 台 开 发 技 
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HTML5 
| 实战 宝典 
术 ， 进 行 Web 和 App 开发 ， 通 过 HTMLS 技术 可 以 显著 改善 用 户 体 验 。 


关于 我 们 








优 逸 客 科 技 有 限 公 司 成 立 于 2013 年 ， 总 部 位 于 山西 太原 。 公 司 是 由 国内 顶尖 的 互联 网 
技术 专家 共同 发 起 成 芯 。 优 逸 客 是 国内 互联 网 前 端 开 发 实 训 行业 的 “ 折 殉 者 ?>， 是 企业 级 产 
品 设计 “方案 提供 商 ”， 是 中 国 UI 职业 教育 的 “知名 品牌 ”公司 的 互联 网 撤 术 实 训 体系 是 
依据 历时 一 年 的 次 度 调研 ， 并 结合 企业 对 人 才 实 际 需求 研发 而 成 的 。 我 们 在 此 基础 上 配 以 宛 
善 的 职业 规划 体系 ， 规 范 的 人 才 毁 养 流程 和 标准 。 经 过 3 年 发 展 ， 公 司 已 先后 在 北京 、 山 
西 、 陕 西 等 区 域 建 立 了 互联 网 人 才 实 训 基 地 ， 己 培养 出 5000 余 名 互联 网 高 端 技 术 人 才 。 在 
未 来 ， 我 们 将 继续 秉承 “专注 、 极 致 、 口 碑 ” 的 理念 ， 逐 渐 成 长 为 我 国 顶尖 的 互联 网 人 才 培 养 
公司 。 

优 逸 客 汇 聚 了 一 批 具有 丰富 Web 开发 经 验 的 布道 师 ， 我 们 很 早 就 意识 到 ， 移 动 化 是 一 
个 再 明显 不 过 的 趋势 ， 未 来 几 年 里 ， 移 动 痕 将 是 Web 开发 的 主 战 场 ， 而 HTMLS Wizjer 
利 的 武器 ， 配 合 程序 逻辑 ， 我 们 将 能 利用 它 创造 无 限 的 可 能 

“这 个 世界 很 关 好 ， 值 得 我 们 为 之 奋斗” 
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关于 本 书 

Web 技术 日 新 月 异 ， 每 个 置 映 其 中 的 从 业者 都 有 逆水 行 丹 ， 不 进 则 退 的 感觉 。 尤 其 是 在 
2014 年 10 月 29 日 ，HIMLS 定稿 之 后 ， 互 联网 进入 了 一 个 轩 狐 的 时 代 。HTMLS5 KE TFI 
造 下 一 代 Web 应 用 的 基础 ， 它 可 以 让 网 站 更 易 开 友 、 更 易 维 护 、 更 上 其 用 户 友 好 性 。HTML5 
被 设计 为 路 平台 的 技术 ， 最 新 版 本 的 Apple Safari. Google Chrome. Mozilla Firefox, Opera 
以 及 Microsoft Internet Explorer 都 支持 HTMLS 的 许多 特性 。 在 iPhone, iPad 及 Android 移动 
Wo Le PUR AM Ds tA MT HTMLS 提供 了 极 好 的 文 持 。 

本 书 系 统 地 讲解 了 HTMLS 的 基础 理论 和 实际 运用 技术 ， 通 过 大 量 实例 对 HTMLS 进行 
深入 浅 出 的 分 析 ， 不 但 讲解 了 HTMLS 在 传统 PC 端的 开发 方法 ， 而 且 看 重 讲解 了 如 何 开发 
混合 型 APP。 全 书 注重 实际 操作 ， 使 谈 者 在 学 习 技 术 的 同时 ， 和 车 握 Web 开发 和 设计 的 精 
He, tem Zea AW Ae 

本 书 第 一 部 分 介绍 了 HTMLS 的 历史 背景 、 新 的 语义 标签 和 语法 规范 、HTML5 Ir) 525 
及 与 以 往 HTML 版 本 相 比 的 变化 ， 同 时 揭示 了 HIMLS 背后 的 设计 原理 。 第 二 部 分 介绍 了 
HTMLS 新 增 表 单 的 用 法 ， 拖 搜 、Canvas、 地 理 位 置 定位 、 本 地 存储 以 及 Canvas YH, JF 
以 项 目 为 张 动 ， 配 有 大 量 的 代 但 和 示例 图 片 。 第 三 部 分 则 主要 介绍 了 HTMLS E a k 
应 用 和 移动 端的 特性 ， 包 括 离线 存储 、WebSocket 等 知识 点 ， 并 有 结合 HBuilder 制作 
WebAPP， 同 时 结合 现在 当前 热门 的 微 信 平 台 制 作 了 一 个 微 信 小 游戏 ， 并 辅 以 大 量 代 码 示 
例 和 图 示 。 

由 于 本 书 讲解 的 知识 由 浅 入 深 并 且 以 项 目 为 有 驱动， 理论 上 适合 任何 对 HTMLS AFAA 
望 的 谈 者 ， 但 是 如 果 您 有 HTML, JavaScript 等 语言 基础 的 话 ， 阅 读本 书 会 更 有 如 人 鱼 得 水 的 
感觉 ， 如 果 您 正在 学 习 或 从 事 有 关 HTMLS 的 开发 工作 ， 那 么 我 相信 和 您 也 一 定 能 从 本 书 中 获 
得 更 为 精准 的 知识 和 实战 的 开发 经 验 。 

本 书 代码 开发 环境 

为 了 更 好 地 学 习 本 书 并 运行 本 书 案例 代码 ， 首 先知 要 搭建 一 个 合适 的 开发 环境 : 

(1) Sublime 或 者 WebStorm 编辑 器 ， 或 者 任意 您 玖 悉 的 编辑 山 ; 

(2) Chrome Wl] ZF o 

此 外 ， 本 书 的 案例 代码 中 ， 会 用 到 PHP 语言 Nodejs 和 Wamp， 相 关 环 境 搭 建 请 参考 
本 书 附 录 部 分 . 
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引用 的 其 他 资源 

在 本 书 中 ， 我 们 会 引用 部 分 W3C 的 官方 文档 和 相关 的 API， 官 方 文档 是 非常 好 的 学 习 
资源 ， 请 读者 重视 官方 文档 的 学 习 。 虽 然 我 们 也 在 本 书 当 中 列 出 了 一 些 常 用 的 API， 但 是 我 
们 还 是 建议 读者 参考 官方 文档 ， 因 为 官方 文档 肯定 是 最 准确 和 更 狐 最 及 时 的 。 

致谢 
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一 个 新 的 Web 开发 平台 
HTMLS 的 出 现 ， 掀 起 了 Web 时 代 的 狐 瀛 滑 ， 各 大 浏览 器 也 部 纷 纷 支持 HIMLS. 











HTMLS 可 以 使 网 页 内 容 更 加 丰富 ， 不 仅 可 以 显示 三 维 图 形 ， 还 可 以 在 不 使 用 Flash 插件 的 基 
础 上 实现 音频 、 视 频 播 放 等 。HITMLS 是 同 下 兼容 HTML4 的 ， 它 是 在 HTMLA 的 基础 之 
上 ， 加 进 了 一 些 新 的 标记 、 属 性 、 功 能 的 一 个 新 的 超 文本 标记 语言 ， 例 如 : HTMLS 拥有 新 
的 HTML 文档 结构 、 新 的 CSS 标准 、API 等 。 

HTMLS 可 以 实现 与 原生 APP 相 媲美 的 应 用 ， 不 用 另行 下 载 安装 ， 完 全 靠 浏 览 句 就 可 以 
运行 











HTMLS5 可 以 让 开发 人 员 在 不 使 用 Flash 插件 或 第 三 方 媒体 插件 的 情况 下 ， 让 用 户 浏览 
网 页 中 的 视频 或 音频 ， 大 大 降低 了 开发 应 用 的 成 本 与 时 间 。 

HTMLS 还 提供 了 很 多 的 应 用 程序 接口 CAPD ， 例 如 基于 浏览 器 支持 的 图 形 API、 地 理 
信息 API、 本 地 存储 API 和 视频 播放 相关 的 API 等 ， 这 些 API 使 得 我 们 开发 一 个 功能 型 的 应 
用 变 得 更 加 容易 了 。 

同时 ，HTMLS 是 一 种 可 以 被 PC. Mac. iPhone, iPad 和 Android FLE 4 FPA P? yg dtl 
览 器 支持 的 跨 平 台 语言 。 

如 今 ，Web 时 代 已 被 移动 端 主导 ， 不 管 是 在 手机 上 还 是 在 平板 电脑 上 ， 随 处 可 以 见 到 
HTMLS 网 站 、HTMLS 应 用 软件 以 及 HTMLS 游戏 ，HTMLS 又 作为 移动 端 开 发 的 主流 语 
言 ， 这 都 说 明 HIMLS 是 前 途 无 量 的 。 











1.2 HTML5 为 什么 受 欢 迎 


相信 大 家 在 阅读 了 上 一 节 的 内 容 后 ， 对 HTMLS CAA SHUR, BRK, RAE 








法 特点 、 功 能 特点 和 对 移动 端的 支持 上 来 说 明 HTMLS 为 什么 受 欢迎 。 
1.2.1 语法 特点 


1. 简单 的 doctype 
我 们 在 创建 HTMLA 时 ， 使 用 的 声明 是 : 


<(DOCTYPE HTML PUBLIC Y/N /DTD KRIMA 01 ENT nrto Wun- no Ora R 
Pem d Seer ee e 


而 创建 HTMLS 时 ， 使 用 的 声明 是 : 
ET 
从 直观 上 来 看 ，HTMLS 更 为 简洁 明了 ， 它 省 略 了 版 本 写 ， 但 浏览 器 依然 能 够 以 HTML 
的 标准 来 显示 网 页 。 
2. 直观 的 结构 
在 HTMLA 中 对 于 网 页 结构 的 划分 大 量 使 用 了 div， 需 要 徘 类 名 、 加 注释 才能 很 好 地 解 
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释 我 们 的 结构 ， 在 HTMLS 中 可 以 使 用 article, footer. header. nav. section 等 标签 来 更 好 地 
了 解 我 们 的 结构 。 


12.2 ”功能 特点 


1. 音频 、 视 频 
在 网 页 中 想 要 实现 音频 、 视 频 播放 ， 一 般 都 需要 引入 Flash 或 第 三 方 媒 体 插件 ， 并 且 要 
ERS, (WO. ME HTMLS rp, Hom: 


—" 











音频 : «audio src="url" autoplay loop></audio> 

视频 : «video src="url" width="300" height="200" controls></video> 

就 可 以 了 ， 可 以 像 使 用 <img> 标 签 一 样 来 实现 音频 、 视 频 播 放 。 

2. 本 地 存储 

HTMLS 可 以 帮助 浏览 器 存储 一 些 用 户 的 信息 、 绥 存 的 数据 、 应 用 的 使 用 状态 等 ， 这 样 
一 来 ， 可 以 加 快 访问 应 用 的 速度 ， 可 以 记录 用 户 上 一 次 的 使 用 状态 ， 在 重新 加 载 时 上 只 加 载 修 
改过 的 状态 ， 节 省 资源 。 

3. 强大 的 Canvas 

使 用 Canvas 可 以 达到 Flash 的 效果 ， 它 可 以 实现 动画 设计 和 游戏 开 友 。 

4. 地 理 信息 

HTMLS 中 提供 了 地 理 位 置信 息 的 API (geolocation )， 通 过 浏览 器 来 获取 用 户 当 前 位 
置 。 在 获取 位 置信 息 前 ， 浏 览 费 会 给 用 户 一 个 提示 信息 ， 只 有 用 户 同 总 以 后 才能 使 用 。 通 过 
此 特性 可 以 开发 基于 位 置 的 服务 应 用 。 


1.2.3 ”对 移动 端的 支持 


开发 移动 端 应 用 有 儿 种 方式 ， 可 以 采用 有 原生 方式 ， 也 可 以 采用 Web 技术 来 开发 。 与 原生 
方式 相 比 ，Web 技术 只 需要 使 用 HTML. CSS 和 Javascript 就 可 以 开发 移动 问 应 用 ， 节 省 了 开 
发 成 本 ， 提 高 了 开发 效率 ， 对 于 研发 人 员 来 说 ， 也 绕 开 了 不 少 撤 术 困难 。HTMLS AS cE xt 
Android. iOS 等 移动 平台 的 路 平台 语言 ， 所 以 在 开发 移动 闫 应 用 时 具有 更 大 的 优势 。 

当前 主流 的 手机 开发 平台 有 : iOS, Android 等 。 其 中 ，iOS 平台 需要 针对 480X320, 
960 X 640 及 1024X768 像素 的 分 辨 率 分 别 设 计 ; Android 平台 中 QVGA 分 辨 率 为 240X320 像 
素 及 更 高 ， 即 使 同一 个 平台 ， 分 辨 率 不 同 ， 设 计 也 会 有 相应 的 差异 。 加 之 客户 端 产品 需要 不 断 
地 更 新 迭代 ， 从 1.0 版 本 、2.0 版 本 一 直到 N.0 版 本 ， 每 开发 一 次 Native App 就 需要 重建 一 次 
平台 。 而 且 现实 状况 是 并 非 所 有 用 户 都 会 积极 更 新 新 的 版 本 ， 所 以 设计 师 和 开发 人 员 在 研发 靳 
功能 的 时 候 还 要 顾及 之 前 的 旧版 本 会 不 会 文 持 等 问题 。 不 同 的 平台 加 上 不 同 的 版 本 ， 大 量 人 力 
物力 被 投入 到 了 铺设 平台 的 工作 中 ， 提 高 产品 用 户 体 验 的 精力 就 变 得 比较 有 限 。 

FEMZEK T 2X9 Ve see TES. JPARBHPE —RUB IT Native App 的 事物 出 
现 ， 而 由 HIMLS 技术 开发 的 Web App 的 出 现 满足 了 这 种 愿望 。HIML3S 技术 的 洽 染 过 程 主 
要 是 由 浏览 器 、 内 网 HTMLS 解析 器 的 应 用 程序 、 文 持 书 签 打 开 方 式 的 应 用 程序 或 移动 手机 
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产品 进行 的 。 如 此 ， 产 品 的 上 线 和 版 本 更 新 不 再 需要 花费 那么 长 时 间 来 铺 平 台 ，Appcelerator 
的 内 部 逻辑 会 将 产品 的 UI 转换 为 iOS 或 Android 等 平台 的 原生 界面 。 同 时 ，Web App 形式 
的 产品 不 需要 用 户 下 载 更 新 ， 通 过 网 络 即 可 以 访问 最 新 版 本 ， 也 便于 设计 师 和 开发 人 员 调 试 
AU TEAR Re, AN FEE CE FRET IE CAS HY f] eid o 

在 苹果 、 众 歌 及 微软 等 公司 的 积极 倡导 下 ，HTMLS 技术 进步 神速 ，Web App 可 以 实现 
的 效果 越 来 越 丰 富 ， 很 多 Web App 已 经 可 以 和 Native App HEE J. 

对 于 未 来 儿 年 里 HTMLS 的 发 展 前 景 ， 概 括 来 说 ， 将 会 有 很 多 公司 进入 HTMLS 这 个 领 
域 ，HTMLS 也 会 像 传统 的 Flex, Flash, Silverlight 和 Objective-C 那样 ， 形 成 一 套 自己 独 有 
的 生态 系统 。HTMLS 将 会 比 Flex、Flash、Silverlight 和 Objective-C 更 容易 出 现在 任何 一 个 
终端 设备 中 。 对 于 年 轻 一 代 的 开发 者 ，HTMLS 会 成 为 他 们 的 首选 技能 ， 有 很 多 公司 都 会 需 
要 这 方面 的 人 才 。 到 目前 为 止 ， 越 来 越 多 的 行业 巨头 正 不 断 间 HTMLS E. RITER mM 
软 、 黑 每 之 外 ， 人 和 谷歌 的 Youtube 已 部 分 使 用 HTMLS; Chrome 浏览 器 宣布 全 面 支 持 
HTML5; Facebook 则 不 遗 余力 地 为 HTMLS 进行 着 病毒 式 传播 。 一 切 正 如 正 益 无 线 总 裁 王 
国 春 所 说 :“HTMLS 代表 了 移动 互联 网 发 展 的 趋势 ， 总 有 一 天 它 将 成 为 主流 技术 ”。 所 以 ， 
HTMLS 作为 一 个 前 端的 编程 语言 ， 其 发 展 前 景 是 非常 好 的 ! 

我 们 还 可 以 从 以 下 方向 中 看 到 HIMLS 的 发 展 前 景 。 

C1) 手机 页 游 的 3D 化 是 大 势 所 趋 。 随 看 便 件 能 力 的 提升 、WebGL 标准 化 的 普及 以 及 手 
机 页 游 和 逐渐 成 熟 ， 大 量 开 发 者 需要 创作 更 加 精彩 的 3D 内 容 。 

(2) HTMLS 移动 营销 出 现 更 多 新 玩法 。 游 戏 化 、 场 景 化 、 跨 屏 互 动 ，HTMLS5 技术 满足 
了 广告 主 对 移动 营销 的 大 部 分 需求 ， 从 形式 到 功能 ， 下 到 传播 。 

(3) 动漫 、 二 次 元 。HIMLS 技术 的 成 熟 ， 将 带 来 动漫 产业 的 升级 。 动 漫 元 素 本 和 映 可 通 
过 HTMLS 来 强化 创意 ， 动 漫 形式 将 具有 富 媒 体 的 高 上 度 交互 、MYV 影音 功能 ， 为 读者 提供 更 
加 场景 化 的 阅读 体验 。 

(4) 轻 应 用 、Web App, Wiis HTML5S 开发 移动 应 用 更 灵活 。 采 用 HTMLS 技术 的 轻 应 
用 、Web App， 以 其 开发 成 本 低 、 周 期 短 、 易 推广 等 优势 ， 将 迅速 普及 。 

(5) 移动 视频 、 在 线 直 播 引 领 视 频 升 级 。HTMLS 技术 将 会 革新 视频 数据 的 传输 方式 ， 
让 视频 直播 更 加 高 清流 畅 。 而 且 ， 视 频 还 将 与 网 页 真正 地 融 为 一 体 ， 让 用 户 看 视频 如 浏览 动 
态 图 一 般 人 简单 轻松 。 

(6) 资源 复 用 ，HTMLS 重新 洗 牌 卫 市 场 。 

CI) XH), HTMLS WMZ V Rp" MARE 

(8) Web VR 让 VR 从 贵族 走向 大 众 化 。 

(9) 微 信 很 有 可 能 会 推出 HTMLS 应 用 市 场 。 































































































1.3 HTML5 的 可 持续 性 





1.3.1 技术 支持 


新 谎 加 的 标签 ， 更 加 便于 SEO， 提 高 浏览 句 对 于 导航 、 栏 目 链接 、 荣 单 、 文 章 等 其 他 部 
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分 的 搜索 ， 从 而 帮助 我 们 的 网 站 提升 内 容 的 价值 。 
开发 移动 APP 的 方式 ， 从 Native (本 地 APP) 到 HTMLS 再 到 Hybrid (混合 型 ) 的 出 
D, permi S FREE, im LEI MEH Cordova 框架 或 HBuilder 等 软件 来 开发 。 可 以 减 
少 插件 ， 方 约 开 发 成 本 ， 而 且 要 运行 同一 个 功能 ， 只 和 需要 在 不 同 的 平台 进行 编译 就 可 以 实现 
中 平台 运行 。 














1.3.2. ”浏览 器 厂商 支持 


Hav, gee IE. Aik Chrome, IR Safari, Opera 和 Firefox 等 主流 浏览 器 均 已 支持 
HTMLS 的 大 部 分 功能 ， 共 体 文 持 情 况 请 读者 参考 本 书 第 2.4 75. 


1.4 HTML5 的 发 展 历程 


1993 年 6 H, HTML 由 互联 网 工程 任务 组 CETF) 发 布 HTML 1.0， 但 它 不 是 标准 的 结 
构 语言 ， 意 义 不 大 。 

1995 年 11 H, IETF 发 布 HTML 2.0， 它 是 HTML 最 早 的 规范 。 

由 于 万 维 网 联盟 (W3C, World Wide Web Consortium) 的 出 现 ，IETE 把 Web 标准 的 
制定 权 转 让 给 W3C. 1996 年 的 1 H, W3C 推出 HTML 3.2。 在 之 后 三 年 的 时 间 内 ，W3C 对 
HTML 做 了 很 多 改进 ， 并 相继 发 布 了 几 个 版 本 。 

1999 年 ，W3C 发 布 HTML 4.01。 它 可 以 使 文档 内 容 与 样式 分 离 ， 而 不 会 像 HTML 3.2 
一 样 破坏 文档 内 容 ， 维 护 起 来 更 加 方便 。HTML 4.01 成 了 20 世纪 90 年 代 非 常 流 行 的 网 页 编 
辑 语言 ， 对 Web 影响 非常 之 大 。 

2001 年 ，W3C 发 布 XHTML 1.0， 它 在 HTML 4.01 的 基础 上 做 了 修改 ， 相 比 HTML 4.01 
语法 更 为 严格 ， 版 本 更 为 纯 浪 ， 而 且 它 还 能 在 当时 所 有 的 浏览 器 上 被 解释 ， 成 为 更 标准 的 标 
记 语 言 。 紧 接着 ，W3C 又 发 布 了 XHTML 1.1， 它 和 XML 没有 什么 区 别 ， 在 使 用 XHTML 1.1 
文档 时 ， 当 时 最 热门 的 Internet Explorer (IE) 浏览 噩 却 无 法 正常 显示 。 所 以 ，W3C 又 继续 改进 
XHTML 1.1。 在 2002 年 8 月 发 布 了 XHTML 2.0， 但 是 它 不 兼容 之 前 的 HTML 版 本 ， 使 用 时 
需要 重新 和 学习， 这 对 于 网 页 编辑 人 员 来 说 并 不 是 好 事 。 

2004 年 ， 网 页 超 文 本 应 用 技术 工作 小 组 (Web Hypertext APPlication Technology 
Working Group, WHATWG) 成 立 ， 重 走 HTML 的 路 线 ， 开 始 创建 HTML5。 他 们 从 两 个 方 
面 对 HTML 进行 扩展 ， 分 别 是 Web Form 2.0 和 Web APPs 1.0， 之 后 这 两 个 版 本 合并 成 为 
HTML5。 与 此 同时 ，W3C 还 在 继续 研究 XHTML. 

2006 年 ，W3C 选择 开发 HIMLS， 自 己 成 立 了 HTML5 的 工作 组 ， 它 在 WHATWG 研 
发 的 HIMLS 的 基础 上 研究 。 

2008 年 ，W3C 发 布 『 HTMLS 的 草案 ， 这 是 HTMLS 的 最 初版 本 。2009 年 ，W3C 放弃 
了 XHTML 的 研究 。 

2010 Æ, HTML5 的 视频 播放 器 开始 取代 Flash 的 地 位 ， 并 且 得 到 Google 的 大 力 支 持 ， 
IN, HTMLS 的 语法 规范 也 开始 攻击 IE 的 私有 语法 ， 打 做 Adobe Flash 与 正在 Web 上 的 
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2011 年 ， 迪 士 尼 、 亚 马 进 和 Pandora 电台 相继 使 用 了 HTMLS 编写 的 应 用 和 音乐 播放 
囊 ， 因 为 可 以 离线 使 用 ， 获 得 了 用 户 的 好 评 ， 而 Adobe 公司 停止 为 移动 设备 开发 Flash 
播放 器 。 

2012 ^E, LinkedIn 推出 的 iPad 应 用 ，95% 都 是 基于 HTMLS 开发 的 。HTMLS 还 支持 大 
容量 的 文件 上 传 ，Flickr 束 使 用 它 提高 了 上 传 速度 。 

2013 年 ， 大 部 分 的 手机 都 开始 文 持 HTMLS 的 应 用 。 

终于 ， 经 过 8 年 的 艰辛 研究 后 ， 在 2014 年 10 月 29 日 ，W3C 宣布 HTMLS 的 标准 规范 
制定 完成 

















ABD BAIR 


2.1 新 的 文档 声明 和 语法 规范 
2.2 ”废弃 的 标签 和 属性 
2.3 ”新 的 结构 标签 和 属性 
2.4 ”对 于 浏览 器 的 支持 情况 


2.1 新 的 文档 声明 和 语法 规范 


从 本 章 开 始 ， 我 们 束 开 始 学 习 HTMLS 中 的 痢 规 范 、 新 标签 、 新 属性 ， 主 要 结合 案例 来 














讲解 各 个 标签 、 属 性 的 用 法 。 
2.1.1 文档 声明 


1. <!doctype>Ay z= X. 

<!doctype> 声 明 必 须 位 于 HTMLS 文档 中 的 第 一 行 ， 也 就 是 位 于 <html> 标 签 之 前 。 该 标 
AS Er ALTA ae SOS IT EA A) HTML 规范 。 

(1) doctype 声明 不 属于 HTML 标签 ; ‘EE ASRS, VED aS OU A pt 
的 版 本 。 

(2) 在 所 有 HTML 文档 中 ， 规 定 doctype 是 非常 重要 的 ， 这 样 浏览 器 束 能 了 解 预 期 的 文 
档 类 型 。 

(3) HTML 4.01 中 的 doctype 需要 对 DTD 进行 引用 ， 因 为 HTML 4.01 基于 SGML。 而 
HTML 5 不 基于 SGML， 因 此 不 需要 对 DTD 进行 引用 ， 但 是 需要 doctype 来 规范 浏览 右 有 的 行 
为 《让 浏览 器 按照 它们 的 方式 来 运行 )。 

2. <!doctype> 的 用 法 

AR EDI: 

<!doctype html> 

«html lang="en"> 

<head> 

<meta charset="UTF-8"> 
(ure oT ENS - 
</head> 

<body> 

HTML5 的 主体 结构 。 

«Ul boc 

< nema 


在 Sublime 和 WebStorm 中 可 以 使 用 快捷 键 快速 创建 文档 主体 结构 ， 详 见 附录 A. 

3. 注意 

<ldoctype> 对 大 小 写 不 敏感 ， 而 且 它 没有 结束 标签 。 

4. EX. XS E BU TU SE 

<meta> 位 于 头 部 中 ， 它 用 于 提供 页 面 的 元 信息 ， 用 来 描述 网 页 的 关键 词 、 网 页 更 新 的 频 
度 ， 同 时 也 可 以 为 搜索 引擎 的 搜索 提供 便利 。 它 的 属性 还 定义 了 与 文档 相关 联 的 名 称 / 值 对 
《元 数据 总 是 以 名 称 / 值 的 形式 被 成 对 传递 的 )。 


EN 
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5. meta 的 属性 

(1) content 属性 

content Ja EREE Y A MIVIEONE FINE. TATE RI DAZE HELA ASI SEF E 

content 属性 始终 要 和 name 属性 或 http-equiv 属性 一 起 使 用 。 

(2) http-equiv 属性 

http-equiv 属性 为 名 称 / 值 对 提供 了 名 称 。 并 指示 服务 器 在 发 送 实际 的 文档 之 前 ， 先 在 要 
传送 给 浏览 右 的 MIME 文档 头 部 包含 名 称 / 值 对 。 

当 服 务 器 癌 浏 览 右 发 送 文档 时 ， 会 先 发 送 许多 名 称 / 值 对 。 虽 然 有 些 服务 器 会 发 送 许多 
这 种 名 称 / 值 对 ， 但 是 所 有 服务 右 都 全 少 要 友 送 一 个 : content-type:text/html. ROA VED bias 
准备 接收 一 个 HTML 文档 。 

使 用 市 有 http-equiv 属性 的 <meta> 标 签 时 ， 服 务 器 将 把 名 称 / 值 对 添加 到 发 送 给 浏览 恬 的 
AAAS. PERS: 


Re 




















Im 可 

TOPE ACIS SI DU] AS SK CINE VA 85 : 

content-type: text/html 

charset:1so-8859-1 

expires:3 1 Dec 2008 

当然 ， 只 有 当 浏 览 需 可 以 接收 这 些 附加 的 头 部 字段 ， 并 能 以 适当 的 方式 使 用 它们 时 ， 这 
EFE X. 

(3) name 属性 

name 属性 提供 了 名 称 / 值 对 中 的 名 称 。HTML 和 XHTML 标签 部 没有 指定 任何 预先 定义 
的 <meta> 名 称 。 通 稍 情 况 下 ， 用 户 可 以 目 由 使 用 对 目 己 和 源 文 档 的 谈 者 来 说 享有 意义 的 名 称 。 

例如 "keywords" 是 一 个 经 党 被 用 到 的 名 称 。 它 为 文档 定义 了 一 组 关键 学 ， 东 些 搜索 引擎 
在 迪 到 这 些 关 键 字 时 ， 会 用 这 些 关 键 字 对 文档 进行 分 类 。 

类 似 的 meta 标签 可 能 对 于 进入 搜索 引擎 的 索引 有 大助 : 


<meta name="keywords" content="HTML, ASP, PHP, SQL"> 


如 果 没 有 提供 name 属性 ， 那 么 名 称 / 值 对 中 的 名 称 会 采用 http-equiv 属性 的 值 。 
(4) charset ETE: 提供 编 妈 方式 


«meta charset="utf-8"> 























UTF-8 (8-bit Unicode Transformation Format) 是 一 种 针对 Unicode 的 可 变 长 度 字 符 编 
人 码 ， 也 是 一 种 前 级 个， 又 称 万 国 码 。 它 可 以 用 来 表示 Unicode 标准 中 的 任何 字符 ， 因 此 ， 它 
逐渐 成 为 电子 邮件 、 网 页 及 其 他 存储 或 传送 文字 的 应 用 中 ， 优 先 采 用 的 编码 。 

GB-2312 是 计算 机 可 以 识别 的 编码 ， 适 用 于 汉字 处 理 、 汉 字 通 信 等 系统 之 间 的 信息 交 
换 ， 它 共 收 入 汉字 6763 “SIEM AEF 682 个 。 

GBK 是 GB2312 的 扩展 版 本 。 

(5) 适用 于 移动 姗 的 meta 标签 





| 


HTML5 
ENDE c5 


«meta name-"viewport" content-"width-device-width,initial-scale-1, maximum- 


Scale-1, minimum-scale-1,user-scalable-no"» 


其 中 meta 的 参数 说 明 如 下 : 

name="viewport": 表示 网 页 窗口 。 

content 属性 中 的 值 可 以 有 以 下 儿 种 情况 : 

width: 控制 viewport 的 宽度 ， 可 以 指定 一 个 具体 的 值 ， 用 于 移动 应 时 赋值 为 device- 
width, RANCH Suh FF ue 

height: 控制 viewport 的 高 度 ， 与 width 使 用 方式 一 样 。 

initial-scale: 初始 缩放 比例 ， 页 面 第 一 次 加 载 时 的 比例 。 

maximum-scale: 最 大 缩放 比例 ， 取 值 范 围 为 0 一 10.0。 

minimum-scale: 最 小 缩放 比例 ， 取 值 范围 为 0 一 10.0。 

user-scalable: 是 否 人 允许 用 户 手 动 缩放 。 当 值 为 yes 或 true WN, Aaa, “AA 
no 或 false 时 ， 表 示 不 能 缩放 。 

viewport 用 来 重新 设置 设备 的 分 辨 率 ， 让 网 页 在 设备 上 都 正好 满 屏 显示 。 























2.1.2 ”语法 规则 


D 标签 要 小 写 。 

(2) 属性 值 可 以 不 加 "或 ”。 

(3) 可 以 省 略 某 些 标签 : html、body、head、tbody。 
O 可 以 省 略 东 些 结束 标签 : try td. din 

(5) 单 标签 不 用 加 结束 标签 : img. input. 

6) 废除 的 标签 : font、center、big。 

CO) 新 添加 的 标签 ， 请 查阅 本 章 2.3 节 。 








2.2 ”上 废弃 的 标 仿 和 属性 





从 上 一 节 的 内 容 中 我 们 可 以 看 出 HIMLS 相 比 之 前 版 本 做 出 的 改进 ， 它 的 改进 不 止 这 
些 ， 它 还 将 一 些 音 用 标签 和 属性 抛 寞 了 。 本 节 主 要 次 明 废 弃 的 标签 和 属性 如 何 来 代替 。 


2.2.1 废弃 的 标签 


1. 表现 性 标签 

HTML 中 的 有 些 标签 只 是 为 了 画面 展示 而 服务 的 ， 比 如 u 标签 ， 在 使 用 时 ， 想 要 显示 
下 夯 线 的 字体 需要 用 u 标签 包 起 来 ， 它 只 是 与 其 他 文学 显示 的 状态 样式) 不 同 而 已 ， 在 
HTMLS 中 像 这 类 的 状态 (样式 ) 都 可 以 用 CSS 属性 编辑 ， 所 以 将 这 类 标签 废弃 掉 了 。 与 
标签 类 似 的 还 有 basefont、big、center、font、s、strike、tt 等 标签 ， 它 们 都 可 以 用 相应 的 
CSS 属性 来 代 符 。 
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2. 框 染 类 标签 

HTML 中 的 框架 标签 fame、frameset、noframes 对 页 面 的 可 用 性 有 负面 影响 ， 所 以 在 
HTMLS 中 将 它们 废弃 了 ， 使 用 iframe HERS, EMR img 标签 一 样 ， 写 入 地 址 ， 设 置 好 
宽 高 就 可 以 了 。 

3. 局 限 性 标签 

RARITA ARX RR Applet (Java 小 应 用 程序 )、bgsound《〈 页 面 添加 背景 音乐 )、blink 
《可 以 闪烁 的 字体 )、marquee GRAN Fe) 等 标签 ， 这 些 标签 在 HTMLS 中 也 被 废弃 掉 了 。 

4. 其 他 被 废除 的 标签 : 

这 是 一 些 很 少 用 到 的 标签 ， 它 们 特殊 但 没有 被 W3C 列 入 规范 ， 所 以 在 HTMLS 中 也 被 
废弃 了 。 

例如 : 

rb 标签 用 来 设 定 航 标示 的 元 素 对 象 ， 为 ruby HFR, EH ruby HN 

acronym 标签 定义 首 字母 缩写 ， 使 用 abbr EH. 

dir 标签 定义 目录 列表 ， 使 用 ul 符 代 。 

isindex 标签 显示 输入 框 ， 使 用 form 与 input 相 结 合 的 方式 蕉 代 。 

listing 标签 显示 静态 页 面 源 代码， 使 用 pre AR. 

xmp 标签 原样 输出 代码， 使 用 code #8. 

plaintex 标签 ， 使 用 “text/plain”( 无 格式 正文 )MIME KWER. 
































2.2.2 JE SEE TE 





用 表 2-1 来 说 明 HTMLS 中 废弃 的 属性 。 


表 2-1 废弃 的 属性 





在 HIML4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML5 中 的 替代 方案 
在 被 链接 的 资源 的 中 使 用 HTTP Content-type 头 
charset link, a - 
元 素 
longies 使 用 a 元 素 链接 到 较 长 描述 
archive, chlassid, codebose, codetype, TNT 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 
declare, standby TS 些 属 性 来 设置 参数 时 ， 使 用 param 属性 


uf 


实战 宝典 
在 HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 

caption , input, legend, 

align div, hl, h2, h3, h4, h5, 

alink, link, text, vlink, background, 
body 

bgcolor 
align. bgcolor. border, cellpadding 、 


cellspacing, frame, rules, width 

align, char, charoff, height. nowrap. 
valign 

align, bgcolor, char, 
nowrap, valign, width 


charoff. height, 


align, bgcolor, char, charoff, valign t 
align, char, charoff, valign, width 
align, border, hspace. vspace 
clear 


compace, type ol, ul, li 


compace 
compace menu 
width re 


align, hspace. vspace 


d$ 


align, noshade, size, width 


align. frameborder, scrolling, marginheight, Tane 
marginwidth 


autosubmit menu 


ANT AY) Zig 44) s UIS TE 





在 HTMLS 中 的 替代 方案 
使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 文字 的 
形式 。 可 以 对 更 详细 内 容 使 用 title 属性 ， 来 使 单 
元 格 的 内 容 变 得 简短 
在 被 链接 的 资源 的 中 使 用 HITP Content-type 头 
元 素 
使 用 CSS 样式 表 替 代 


使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS 样式 表 替 代 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FARER 
使 用 CSS FERRER 
使 用 CSS FESR EEN 
使 用 CSS PES EEN 
使 用 CSS FERRER 
使 用 CSS FARER 
使 用 CSS FESR EEN 





2.3.1 新 的 标签 


HTMLS 新 增 了 一 些 标签 ， 但 它们 并 不 像 我 们 想象 的 那样 阳 生 ， 它 们 只 是 更 加 符合 我 们 
的 思维 方式 ， 更 人 性 化 。 投 照 以 往 的 布局 方式 ， 我 们 要 划分 页 面 结构 时 都 是 使 用 的 div， 例 
如 <div_ class="header"></div>, «div id="footer"></div> 等 。HTML5 直接 用 header. footer 标 
FRIRE div， 这 类 标签 更 加 语义 化 ， 便 于 疏 虫 谈 取 (SEO)。 下 面 详细 介绍 HTMLS 新 增 的 








标签 以 及 它们 的 用 法 。 
1. 结构 性 标签 








结构 性 标签 (construct tag) 主要 负责 Web 的 上 下 文 结构 的 定义 ， 确 保 HTML 文档 的 完 
整 性 ， 使 网 页 的 文档 结构 更 加 明确 。 这 类 标签 包括 以 下 几 个 : 
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(1) section 标签 用 于 表达 文档 的 一 部 分 或 一 草 ， 或 者 一 章 内 的 一 节 。 在 Web 页 面 应 用 中 ， 
该 标签 也 可 以 用 于 区 域 的 草 市 表述 。 它 用 来 表现 普通 的 文档 内 容 或 应 用 区 块 ， 通 党 由 内 容 及 
其 标题 组 成 。 但 section 标签 并 非 一 个 普通 的 容器 元 素 ， 它 表示 一 段 专 题 性 的 内 容 ， 一 般 会 
带 有 标题 。 

代码 示例 ; 




















<section> 

<h1> 新 章节 的 标题 </h1> 
meu cM 

<Ph2> 第 一 闻 的 标题 </n2> 

< cre IL eee AS 
</article> 

</section> 





(2) hgroup 标签 对 网 页 或 区 段 (section) 的 标题 进行 组 合 。 
代码 示例 : 


-<ngroup- 

<hi> = HTML Mi «/h1» 
<h2>58 — B 新 的 结构 标签 和 属性 </h2> 
<h3> 痢 的 标签 </nh3> 
<h4> 结 构 性 标签 </h4> 


moe op 








(3) header bR AS 4H 24 T vin EVE EMSRS Cia) ， 注 总 区 别 于 head 标签 。 这 里 可 以 
给 初学 者 提供 一 个 判断 区 别 的 小 技巧 : head 标签 中 的 内 容 往往 是 不 可 见 的 ， 而 header 标签 
往往 在 一 对 body 标签 之 中 。 

SAN Bl: 


<header> 
<h1> 网 页 的 标题 </h1> 
<nav> 上 导航 部 分 </nav> 
</header> 











(4) footer 标签 相当 于 页 面 的 底部 (页 脚 )。 通 常 ， 人 们 会 在 这 里 标 出 网 站 的 一 些 相 关 信 
恩 ， 例 如 关于 我 们 、 法 律 申 明 、 邮 件 信 息 、 管 理 入 口 等 。 
代码 示例 : 


<Poouer> 
&copy; 网 页 的 版 权 声 明 。 


AGGRE 


(5) nav 标签 是 专门 用 于 沫 单 导航、 链接 导航 的 标签 ， 是 navigator 的 缩写 。 
代码 示例 : 





<nav> 
<ul> 
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«ler eS rae Decem Tabs 
um ncc Ede A 
人 
< 
«debes dandus es univ a 
«mls 

</nav> 


(6) article 标签 用 于 表示 一 篇 文章 的 主体 内 容 ， 一 般 为 文字 集中 显示 的 区 域 。 
ANI BU: 


<article> 

<header> 

<h1> 文 章 的 标题 </h1> 

<time datetime="2015-08-08">2015.08.08</time> 
</header> 

<p> NAA </p> 

</article> 

















2. RRM 

块 级 性 标签 〈block tag) 主要 完成 Web 页 面 区 域 的 划分 ， 确 保 内 容 的 有 效 分 隅 ， 这 类 标 
签 包 括 以 下 几 个 。 

(1) aside 标签 是 用 以 表达 注 记 、 贴 士 、 侧 栏 、 摘 要 、 插 入 的 引用 等 作为 补充 主体 的 内 
容 。 从 一 个 简单 页 面 显示 上 看 ， 束 古 侧 边栏 ， 可 以 在 左边 ， 也 可 以 在 右边 。 从 一 个 页 面 的 局 
BUE. e. 

SAN Bl: 

Kee cle 


<p>tF ala </p> 
</aside> 


(2) figure 标签 规定 独立 的 流 内 容 〈 图 像 、 图 表 、 照 片 等 )， 通 名 与 figcaption 联合 使 用 。 
代码 示例 : 
<figure> 


<figcaption> A= Ria figcaption 
ee ay OG. a Pose Es 

















E O a 


(3) code ERAS ZR — RRI, 
代码 示例 : 


<code>— Ex Hin (tig</code> 
(4) dialog PÆRE XXEN B4 L1, Hütr«do. «dd—ERARTEH]. ERTE open 规定 dialog 
ITRE, APA Zea. 
代码 示例 : 


D 
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«table border="1"> 
p 
<td>}il—<dialog open- RJ A th Bei O</dialog></td> 
«deae 
«Edu </td> 
=) war 
LTES 
“ec 7 OE 
uel Src eb 
ol ds op 
<< ee 
</table> 


(5) Canvas 标签 。 它 是 一 个 画布 标签 ， 用 它 可 以 实现 电脑 上 的 画图 工具 ， 可 以 在 网 页 中 
男 出 不 同 的 图 形 。 

3. {TARE 

行内 语义 性 标签 (in-line tag) 主要 完成 Web 页 面具 体内 容 的 引用 和 表述 ， 是 丰富 内 容 
展示 的 基础 ， 这 次 标签 包括 以 下 儿 个 标签 。 

CI) meter 标签 表示 特定 范围 内 的 数值 ， 可 用 于 工资 、 数 量 、 百 分 比 等 。max 表示 最 大 
值 ，min 表示 最 小 但，value 代表 当前 值 ， 如 图 2-1 rn. 

代码 示例 : 


<merer value=w6O" minmn="0" mazx="10">6/10</meter><br> 




















<merter value="0 ,37>50%</merter> 


图 2-1 meter 示例 


(2) time 标签 表示 时 间 值 ， 访 元 系 能 够 以 机 器 可 谈 的 方式 对 日 期 和 时 间 进 行 编码 ， 属 性 
datetime 强调 日 期 和 时 间 。 
代码 示例 : 
<p> 
«time datetime="2015-09-27">HRkji</time>S_Lm2l y. 
A 


(3) progress 标签 用 来 表示 任务 的 进度 条 ， 属 性 max 表示 最 大 任务 值 ， 属 性 value 表示 
完成 了 多 少 任务 ， 如 图 2-2 所 示 。 
代码 示例 : 
<p> Pave: </p> 


<progress value="34" max="100"></progress> 











as | 


下 载 进度 : 


图 2-2 progress 示例 


4. 多 媒体 标签 

多 媒体 标签 (multimedia tag) ， 它 可 以 让 网 页 对 视频 和 音频 有 看 更 好 的 实现 ， 不 用 再 与 
其 他 的 插件 配合 使 用 。HTMLS5 中 提供 了 video 视频 标签 与 audio 音频 标签 ， 详 情 参 照 第 8 章 
HTMLS5 对 多 媒体 的 文 持 。 

o. 表单 控件 

HTMLS 中 的 表单 更 加 自由 ， 不 用 将 表单 元 素 全 部 放 在 form 标签 对 中 ， 它 可 以 放 在 页 面 
的 任何 位 置 ， 表 单元 素 上 只 需要 通过 form 属性 指 癌 元 素 有 所属 表单 的 id fo, WAIRERE 
起 来 。 而 且 以 前 使 用 表单 ， 都 需要 用 JavaScript 来 验证 用 户 输 入 的 信息 是 否 规 范 ， 现 在 狐 增 
的 一 些 表 单 探 件 目 市 验证 功能 ， 大 大 的 解放 了 我 们 的 双手 。 例 如 datalist 选项 列表 标签 、 
output 输出 标签 、email 输入 类 型 、url 输入 类 型 、 日 期 时 间 类 型 、number KF! range 清 块 
类 型 、search 类 型 、tel 类 型 、color 类 型 等 。 详 情 参 照 第 3 Ht HTMLS 表单 新 功能 。 

6. 交互 性 标签 

交互 性 标签 (interactive tag) 主要 用 于 功能 性 的 内 容 表 达 ， 会 有 一 定 的 内 容 和 数据 的 关 
联 ， 它 是 各 种 事件 的 基础 ， 这 类 标签 包括 以 下 几 个 。 

(1) menu 标签 主要 用 于 交互 沫 单 〈 这 是 一 个 曾 被 废 弃 现 在 义 被 重新 启用 的 标签 )， 它 会 
实现 女 标 右 击 元 素 会 出 现 一 个 采 蛙 ， 但 几乎 所 有 的 主流 浏览 器 都 不 文 持 它 。 

属性 说 明 : 

1) type: 规定 要 显示 哪 种 菜单 类 型 。 它 有 3 BAT: 

list: 列表 荣 单 ， 一 个 用 户 可 执行 或 激活 的 命令 列表 。 

context: 上 下 文采 单 ， 它 必须 在 用 户 能 够 与 命令 进行 交互 之 前 被 激 活 。 

toolbar: 工具 栏 染 单 ， 人 允许 用 户 立 即 与 命令 进行 交互 ， 它 是 一 个 活动 式 命 令 。 其 中 
list，toolbar 功能 还 未 实现 。 

2) label: 规定 末 单 的 可 见 性 ， 值 为 text( 想 要 显示 的 文本 )。 

代码 示例 : 


<menu type="toolbar"> 
eine 






















































































«menu label="File"> 

«button type-"button" onclick-"file new()"»3$É«/button» 
«button type-"button" onclick-"file open()"»1]Jf«/button» 
«button type-"button" onclick-"file save () ">tKf</button> 
</menu> 

“of qb 

hal 

<menu label="Edit"> 


ion T Jr 
buon Eyoe— Pe onclick-"edit cut () ">BJW)</button> 
«button type="button" onclick="edit copy () "> il</button> 
«button type-"button" onclick-"edit paste () ">#illi</button> 
</menu> 
<j bs os 


</menu> 


(2) command fk Hj ok Ab Jag Sree, ANA PH WAS. HH SY £u 
都 不 文 持 。 
代码 示例 : 


<menu> 





<command type="command">Click Me!</command> 


</menu> 


(3) menuitem 是 用 来 显示 玉 蛙 项目 的， 它 有 如 下 属性 : 

1) icon: 给 末 单 项 瀛 加 图 标 。 

2) label: KAPJ HZI. 

3) checked: 页 面 加 载 后 选中 来 单项 目 。 

4) default: WE SA IO. 

5) open: 定义 details 是 否 可 见 。 

6) radiogroup: 命令 组 的 名 称 。 适 用 于 type="radio". 

ee command 〈 相 关联 动作 
的 普通 命令 ); radio《〈 单 选 )。 只 有 火狐 〈Firefox) Ras XE VAI TE 

RUE 


<div style="width: S00px; emite 30px: background: blue" eon ememu-myrienmme- 











«menu type-"context" id="mymenu"> 

«menuitem label=" 恢 复 "></menuitem> 

«aream dosdoe lara" 

«menuitem label="Twitter" type="radio"></menuitem> 
<menuitem label="Facebook" type="radio"></menuitem> 
</menu> 

«menuitem label="AiKHPE"></menuitem> 

</menu> 


</div> 


2.3.2 ”新 的 属性 


1. contextmenu 
在 HTMLS 中 ， 每 个 元 素 新 增 了 一 个 属性 : contextmenu， 它 是 上 下 文 菜单 ， 即 鼠标 右 击 
元 素 会 出 现 一 个 菜单 。 它 配合 menu 标签 使 用 ，contextmenu 的 值 设置 为 menu 的 id 名。 使 用 
这 个 标签 时 要 先 阻 止 浏览 器 的 默认 行为 。 
17 | 








HTML5 


实战 宝典 
代码 示例 : 


<p contextmenu-"supermenu" id="p-menu"></p> 

«menu id="supermenu" label="dothing"> 

<command label=" tep 1: write Tutorial onclick" dosomerh imag (|) 
-Command label=" tep HO Tutorial onclick: "do ometNingElsSe() T> 
</menu> 


2. contenteditable 

contenteditable Hie 72 77H) 2g RWAN, "EIUS EEAS: 

(1) true: 可 以 编辑 元 又 的 内 容 。 

(2) false: TEMARA. 

(3) inherit: 27K 22 7,24 1] contenteditable 属性 。 

当 属 性 值 为 至 字符 串 时 ， 效 果 和 true 一 致 。 

当 一 个 元 素 的 contenteditable 状态 为 true Ccontenteditable 属性 为 空 字 和 人 符 串 ， 或 为 true, 
或 为 inherit 且 其 父 元 素 状 态 为 tue) 时 ， 章 味 看 该 元 素 是 可 编辑 的 。 耕 则 ， 该 元 素 不 可 编 
辑 ， 如 图 2-3 和 图 2-4 所 示 。 

代码 示例 : 

<P contenteditable="true" stvyle="width: 300px height: 30px border: 1px 
solid regd;"> 能 编辑 的 文本 段 洲 </p> 


和 编辑 的 文本 段落 


图 2-3 可 编辑 的 文本 (a) 


高 辑 的 段落 


图 2-4 可 编辑 的 文本 (b) 

































































3. draggable 

draggable ME TUF Ee 17H] DAHER. EX true 时 表示 可 以 拖 搜 ， 值 为 false 时 表示 不 能 拖 
搜 ， 值 为 auto 时 按 浏 览 器 的 默认 行为 来 是。 在 使 用 该 属性 时 ， 还 需要 配合 Javascript 来 实 
现 ， 使 用 dataTransfer 对 象 在 拖 搜 事件 中 传输 数据 。 详 情 参 照 第 4 章 文 件 处 理 与 拖 放 。 

4. dropzone 

dropzone 属性 规定 在 元 素 上 拖 动 数据 时 ， 是 合 揽 贝 、 移 动 或 链接 被 拖 动 数 据 。 它 的 值 
为 copy 时 ， 拖 动 元 素 时 复制 数据 ， 值 为 move 时 不 会 复制 ， 而 是 将 被 拖 动 的 数据 移动 到 新 的 
MEAE, EN link 时 ， 会 产生 一 个 指 问 原 数 据 的 链接 。 

代码 示例 : 


<p id="drag" draggable="true" ondragstart="drag(event)"  dropzone- 
"copy" RE ra oN ER. «/p» 


D 
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o. hidden 
hidden JB EH FZI. — HEH TEETE, WAU ANS EDU PN o 
它 的 值 为 true Iau ze ze n] ILAJ, (EX false Ica EN AY LAY. 
代码 示例 : 


«div hidden style="width:100px;height:100px; background: red; ">123</div> 




















6. spellcheck 

spellcheck 属性 规定 是 否 对 元 素 进 行 拼 瑟 和 语法 检查 。 它 可 以 对 以 下 内 容 进 行 拼 写 检 
fr: input 元 素 中 的 文本 值 〈 非 密码 ) ; textarea 元 素 中 的 文本 ; 可 编辑 元 素 中 的 文本 。 值 为 
true 时 进行 检查 ， 值 为 false IAS f - 

代码 示例 : 


“p cContenteditabole true style rates S serena Oo border slip. solid 
red;" spellcheck-2"true"»fRBEZmEBLM Cd BUE /p» 




















T. translate 
translate 规定 是 否 应 该 翻译 元 素 内 容 。 值 为 true 时 可 翻译 ， 值 为 false 时 不 可 翻译 。 
代码 示例 : 





<p translate="no">mAMIZAR. </p> 
<p> 本 段 可 被 译 为 任意 语言 。</p> 





8. 表单 元 素 属性 

表单 元 素 新 添 的 属性 也 可 以 帮 我 们 做 一 些 验 证 ， 例 如 placeholder 属性 可 以 将 光标 定位 到 
fey ARES HUTA. required 属性 用 于 验证 值 是 否 为 宇 、pattern 类 型 专 为 验证 正则 、autofocus 
JR VERT UAIR autocomplete 目 动 完成 属性 等 ， 对 于 这 些 属 性 的 设置 与 效果 ， 请 参照 3.4 
节 表 单 验 证 部 分 。 

















24 ”对 于 浏览 器 的 支持 情况 


上 一 市 介绍 了 HTMLS 中 新 增 的 标签 与 属性 ， 这 些 新 增 的 标签 与 属性 对 于 目前 的 主流 浏 





览 器 来 说 ， 文 持 情 况 也 各 不 相同 ， 本 节 主 要 以 表格 的 形式 来 体现 ， 通 过 PC wm CIE. 
Firefox, Chrome, Safari, Opera) 与 移动 端 (Android 和 iOS) 介绍 各 大 浏览 器 对 HTMLS 和 
CSS3 的 文 持 情况 。 

2.4.1 CSS3 属性 


从 图 2-5 中 可 以 看 出 ，text-justify 属性 除了 正文 持 以 外 ， 其 他 浏览 器 都 不 文 持 。 其 他 的 
大 多 数 属 性 ，IE 都 已 经 开始 文 持 了 。 从 图 中 还 可 看 出 ， 对 HTMLS 文 持 比较 好 的 是 Chrome 


a | 


HTML5 
EN c5 


与 Safari， 其 次 支持 比较 好 的 是 Opera 和 Firefox， 移 动 端 中 Android 设备 浏览 器 支持 性 要 比 


iOS 的 更 好 。 
eco0 


iw 


css 属 性 


E 
rm 
m 
e 


backgound-attachment 4 


X 


= 
eo» 


background-blend-mode 
background-position-x 
& background-position- 
y 

border images 
border-radius 
box-shadow 
box-sizing 

Animation 
font-feature-settings 
font-size-adjust 
font-stretch 
font-variant- 
alternates 


font unicode-range 
subsetting 


transitions 


4. 


A JAJA [X IRL |RLIX| «A ee || 之 | 4. 4. aq |X KA [4 |4. [4 |a. |. <、 TEO 
[m 


2D Transforms 
3D Transforms 


appearance Da p 
filter Effects 
repeating Gradients 


TIT PTITEEHE HE E 


X 


cursors:zoom-in & 
zoom-out 
text-justify 
overflow-wrap 
tab-size 
text-align-last 
text-overflow 
text-shadow 
text-stroke 


4. [AIR ajA AX OX | 区 | 人 | 二 人 | 4 4. X |XX jajajajaja] «X [AX 
E 


RR ERU 
li 





2-5 CSS 属性 支持 情况 


2.4.2 CSS 选择 器 











如 图 2-6 所 示 ，CSS3 选择 禹 与 浏 贤 寓 莱 容 情况 表 ， 除 了 1OS 对 ::selection 不 文 持 ，IE11 
对 ::in-range、::out-of-range、:matches 不 支持 ， 其 他 主流 浏览 器 都 已 全 部 支持 CSS3 we Peasy 
性 。IE6 与 IE8 完全 不 文 持 CSS 选择 器 ，IE9 只 有 少 部 分 不 支持 ， 从 IE 的 进步 上 看 ， 可 以 说 
Fe TED 拯救 了 网 页 开发 人 员 。 


EM 


L5 Hi TES 

"a S 4 

css 选 择 器 - e © e O € 
| IEG | IE8 | IE9 | IEl1 | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 
::first-letter 
: :placeholder 
::selection 
: :in-range 
: tout-of-range 
:matches 
[foo -' bar’ ] 
[foo$-' bar" ] 
[foo*-' bar’ ] 
:root 
:nth-chi 1d x x fv vf 


X 


:nth-last-chiid —————————— 
:nth-of-type 
:nth-last-of-type y E 
EE C a E E E 


TT 
ut 
iil 
Lii 
Lii 
Lii 
Lii 
Lii 
Lii 
TIT 


X 


:first-of-type [x — |x WwW |4 MY — |4 Ww — |4 YY  |4 — | 
slast-of-type — |X — |x — |4 — |4 — 4 yy — |4 —)|4  ]|4  |4 — 


:only-child x x j|4 j|4 34 [|4 j|4 ]|4 ]|4 | 
sonly-of-type — |X — x — |4 — |4 — !4 — |4 | —|4 — J|4 | YY — 


X [X 


empty 
TEES x 
TERP 
‘disabled 
SES 
tee 


图 2-6 CSS 3 选择 器 的 支持 情况 


2.4.3 HTMLS Web 应 用 程序 





如 图 2-7 所 示 ，Chrome 与 Opera 对 Web 应 用 程序 的 文 持 是 最 好 的 ，Firefox 与 Safari 相 
比 ， 多 了 支持 Web Animations API, Web RTC Peer-to-peer Connections, Android 的 支持 情况 
又 比 iOS 的 好 。 从 这 些 浏览 器 对 Web 应 用 程序 的 文 持 情况 这 一 方面 来 看 ， 也 挺 让 开发 人 员 
激动 的 了 。 





Q C O O í 
css 选 择 器 e ”| SZ @ 
| IE6 | IE8 | IE9 | IE11 | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 
drag and drop 
TED 
Senn 
本 
API 
web audio API 4 
web cryptography 
web MIDI API 
web sockets 


web storage- 
name/value pairs 
web workers 

web RTC Peer-to- 


peer connect ions 


a 
i 
i 
i 
i 

< 


J 


X 


HR 


X 


LE 
HE 
LE 
^nt 
i 
i 


i 
i 
l 
i 
X 


图 2-7 HTMLS5 Web 应 用 程序 的 支持 情况 


m | 


HTML5 


EN er 
2.4.4 HTMLS KJÉSRPJ 8x FJ 


如 图 2-8 所 示 ， 其 中 对 favicons 与 fonts 的 文 持 不 太 好 ， 内 置 Canvas, SVG 和 SVG in 
CSS backgrounds 等 特性 ，Chrome、Firefox、Safari 和 Opera 以 及 手机 端的 两 个 浏览 器 也 基本 
文 持 ， 当 然 ， 正 8 与 IE6 还 是 不 文 持 。 





- e © O í 

css 选 择 器 > © © @ 

| IEG | IE8 | IE9 | IRI | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 

Canvas EE aa S Se 


Canvas blend modes 
y y 


SVG X a E Sl | A E 
SVG effects for 
mmm kp p e p e p e d 


SVG favicons x 

S¥G filters X 

SVG fragment 
identifiers 

SVG in CSS 
backgrounds 

SVG in HTML img 
element 


SYG SMIL animation 
SVG fonts 


TERME 





图 2-8 BAA TKA AH SERE DU 


2.4.5 HTMLS Sih, Um 


如 图 2-9 所 示 ， 对 于 HTMLS 中 的 Audio Element 和 Video Element Wi, Firefox, 
Chrome, Safari, Opera, Android, iOS 都 文 持 ， 但 音频 轨道 、 视 频 轨 道 文 持 不 大 好， 只 有 
Safari 和 iOS 全 部 支持 。 


css 选 择 器 WD 


Audio Element 
Audio Tracks 
Video Element 

C | 


Video Tracks X 








2.4.06 HTMLS 表单 输入 


如 图 2-10 tax, HTMLS 新 增 了 众多 新 的 input 类 型 ， 例 如 DateTime, Range. Number, 


EM 


HTML5 3l: 
Email, URL 等 ， 以 前 这 些 都 是 需要 使 用 JavaScript 才能 实现 的 功能 ， 如 今 只 需要 设置 input 
FARA HAE SEL. Opera. Android 和 iOS 全 部 文 持 ，Chrome、Firefox 和 Safari 都 文 持 一 部 
分 ，IE 家 族 则 基本 不 文 持 。 


全 的 A 
css 选 择 器 e © © © O @ 


ETE NR Ek ee a a ORE METN 
X |x 04 


Form:Search yv w wy ee i ee 
Form:Phone 
Form :URL x — [x [xv 


X 


Form:Email x — IX |x |¥ |v |v |4 |v iv |v | 


Form:DateTime 
Form:Date X X 4 4 
Form:Month 
Forn:Week x x x x 
Form:Time x x x 
Form:LocalTime x x 
Form:Number x 
Form: Range 


图 2-10 HTMLS 表单 输入 的 文 持 情 况 


2.4.7 HIMLS 表单 属性 


HTMLS 表单 属性 也 是 对 表单 功能 的 重要 改进 ， 简 化 了 Web 应 用 开发 。 如 图 2-11 所 
示 ，Autocomplete 所 有 的 浏览 器 都 支持 ，Firefox 对 Min, Max 和 Placeholder 属性 还 是 不 支 
持 ， IE 又 是 基本 不 文 持 。 


f 3 , 
css 选 择 器 > etc O ed 

| IEG | IE8 | IE9 | IEl1 | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 
autocomplete 
autofocus 
list 
placeholder 
min 
max 
multiple 
pattern x x x vv 
required x Ix x vy YY we ]|4 |y |4 | j| 


图 2-11 HTMLS 表单 属性 的 支持 情况 





以 上 这 些 就 是 主流 浏览 器 对 HTMLS 和 CSS3 的 文 持 情况 ， 各 个 浏览 器 还 在 对 文 持 它们 
的 技术 在 做 改进 ， 可 能 大 家 在 看 到 这 本 书 时 ， 文 持 情 况 会 有 变化 ， 恋 者 可 从 网 络 上 获得 最 新 
的 文 持 情况 。 
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3.1 表单 新 控件 详解 
3.2 构建 表单 用 户 界面 
33 表单 验证 

3.4 ”注册 和 登录 实战 


HTML5 表单 新 功能 一 一 注册 和 登录 验证 实战 

在 HIML 4 中 ， 实 现 表单 信息 的 录入 需要 用 到 的 标签 有 input 标签 、select 标签 、option 
标签 、textarea 标签 、label 标签 等 ， 通 过 input 的 type 属性 可 以 调整 输入 框 的 类 型 。 在 HTML 4 
中 提供 了 “text”“password”“Tradio”“checkbox”“submit” 等 ， 这 些 表 单 控件 提供 了 不 同类 
型 的 功能 ， 但 是 一 些 数据 的 验证 工作 还 需要 结合 Javascript 等 脚本 语言 来 实现 。 

HTMLS 中 的 元 素 和 特性 提供 了 更 加 强大 的 语义 标记 ， 其 中 关于 表单 的 修改 令 人 眼前 一 
渤 。 其 中 有 很 多 特性 功能 都 非常 实用 ， 比 如 可 以 像 在 Word 里 面 一 样 通过 色 板 选择 某 种 颜色 ， 
或 者 直接 选择 一 个 日 期 。 此 外 ， 还 有 一 些 非常 好 用 的 属性 ， 比 如 单 击 清除 的 属性 ， 正 则 验证 属 
性 。 虽 然 在 不 同 的 浏览 器 上 的 支持 各 有 人 不同 ， 但 是 这 些 狐 功能 还 是 很 值得 我 们 去 学 习 。 

本 章 内 容 包 括 : 

3.1: 关于 表单 新 的 控件 类 型 的 详细 介绍 ， 包 括 form 标签 与 input 的 标签 的 新 写法 ， 
email 输入 类 型 、url 输入 类 型 、 日 期 相关 输入 类 型 、time 输入 类 型 、range 输入 类 型 、search 
输入 类 型 、color 输入 类 型 、datalist 标签 等 。 

32: 结合 HTMLS 表单 特性 ， 制 作 一 个 登录 页 面 和 一 个 注册 页 面 。 

3.3: 了 解 新 的 表单 验证 功能 和 属性 ， 如 autofocus 属性 、placeholder 属性 、autocomplate 
属性 、novalidate JE. multiple 属性 、required 属性 、pattern 属性 、autocomplete 属性 等 ， 
并 且 将 这 些 属性 添加 到 我 们 所 写 的 页 面 中 。 

3.4: 完成 一 个 完整 的 登录 注册 设计 流程 。 
































3.1. 表 里 新 控件 详解 


3.1.1 新 的 表单 结构 


HTMLS 中 的 表单 结构 变 得 更 加 自由 ， 原 和 完 在 HTML4 中 所 有 的 表单 内 容 都 得 在 一 对 form 
标签 中 ， 类 似 于 这 样 : 


<form action-"" method-"post"» 








a a A 
< 


在 HTMLS 中 表单 控件 完全 可 以 放 在 页 面 中 的 任何 位 置 ， 然 后 通过 新 增 的 form 属性 
指 问 控件 所 属 表单 的 id 值 ， 即 可 关联 起 来 。 这 样 代码 的 自由 性 就 会 更 高 了 ， 类 似 于 下 面 
这 样 : 




















Form id- myr orm S Torm 


<input type- “text rorm= myi oim 9 valus= "> 


3.1.2. ”新 增 type 属性 


接 下 来 ， 我 们 来 认识 一 些 新 增 type 属性 : 


HTML5 
| her 

1. email 输入 类 型 

说 明 : 此 类 型 要 求 键 入 格式 正确 的 Email 地 址 ， 否 则 浏览 坪 是 不 允许 提交 的 ， 并 会 有 一 
个 铺 误 信息 提示 。 此 类型 必须 指定 name 值 ， 合 则 无 效果 。 

格式 : <input type=email name=email> 

错误 效果 展示 (Firefox) 如 图 3-1 所 示 : 


| asd | Tue er ih] 


ida: ^ FEET REESE, 





图 3-1 
正确 格式 展示 (Firefox) 如 图 3-2 所 示 : 
sxuek@qq.com| 提交 查询 
图 3-2 


2. URL 输入 类 型 

说 明 : 此 类 型 要 求 输 入 格式 正确 的 URL 地 址 ， 否 则 浏览 器 是 不 允许 提交 的 ， 并 会 有 一 
个 错误 信息 提示 。 此 类 型 必须 指定 name 值 ， 人 否则 无 效果 。 

格式 : <input type=url name=url> 

错误 格式 展示 (Firefox) 如 图 3-3 Bras: 


| asd| 提交 查询 


请 樟 入 一 个 URL, 


图 3-3 
正确 格式 展示 (Firefox) 如 图 3-4 所 示 : 


http://www.sxuek.com|| fracti 
K| 3-4 


3. 时 间 日 期 相关 输入 类 型 

说 明 : 时 间 日 期 相关 输入 类 型 这 一 系列 表单 控件 提供 了 丰富 的 用 于 日 期 选择 的 表单 样 
式 ， 包 括 年 、 月 、 周 、 日 等 。 只 和 需要 一 行 代码 就 可 以 实现 交互 性 非常 强 的 效果 ， 但 遗憾 的 是 
目前 在 Windows 系统 下 仪 有 Chrome 和 Opera 支持 这 个 类 型 。 

格式 : <input type=date name=my date> 

BRAS (Chrome) 如 图 3-5 所 示 : 


| 26 














注册 和 登录 验证 实战 





HTML5 表单 新 功能 


2016/A/A x > | | 提交 | 


20152208 A = 4 {| @ || + 





图 3-5 


格式 : <input type=time name=my_time> 
效果 展示 (Chrome) 如 图 3-6 Wr: 


€ jx 


图 3-6 


格式 : <input type=month name-my month» 
效果 展示 (Chrome) 如 图 3-7 所 示 : 





年 -月 $T ™| GER | 


2015:E08H + | @ || > 





图 3-7 


格式 : <input type=week name=my week> 
ER EAS (Chrome) 如 图 3-8 Arm: 





= +8- A + yl [提交 | 





20153508 + i|| || + 


周一 周二 B= 局 四 AA Ar RIE 
1 2 
a 9 


15 
JJ 23 
29 30 





图 3-8 
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格式 : <input type=datetime name=my datetime> 
经 测试 ，datetime 类 型 在 任何 浏览 左 中 都 无 效 末 。 
格式 : <input type-datetime-local name=my_localtime> 


选取 本 地 时 间 ， 效 果 展 示 〈Chrome) 如 图 3-9 所 示 : 
ASE —:— 
2015 年 08 月 + 4 || = || 上 


E- A BI AN 周 五 BEA AA 








4. number 输入 类 型 

说 明 : 用 于 输入 一 个 数值 ， 可 以 通过 属性 设置 最 小 值 、 最 大 值 、 数 字 间 隔 、 默 认 值 〈 了 下 
不 文 持 )。 

格式 : <input type=number max=10 min=0 step=1 value=5 name=number> 

max: 规定 允许 的 最 大 值 ; 

min: 规定 允许 的 最 小 值 ; 

step: 规定 合法 的 数学 间隔 ; 

value: 规定 默认 值 ; 

效果 展示 (Firefox) 如 网 3-10 所 示 : 


5| = ||| 提交 查询 
图 3-10 


5. range 背 块 类 型 

说 明 : 和 前 面 的 number 美 似 ， 只 不 过 这 里 是 用 滑 块 展示 ， 如 条 是 在 移动 端 展示 的 话 ， 
给 用 户 的 体验 会 比较 好 。 

格式 : <input type=range max=10 min=0 step=1 value=5 name=val> 

max: 规定 允许 的 最 大 值 ; 

min: 规定 允许 的 最 小 值 ; 

step: 规定 合法 的 数学 间隔 ; 

value: 规定 默认 值 ; 

效果 展示 (Firefox) 如 图 3-11 Pra: 


EM 
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6. search 输入 类 型 

说 明 : 此 类 型 表示 输入 的 将 是 一 个 搜索 关键 学 ， 通 过 设置 results=s 可 显示 一 个 搜索 小 
图 标 。 

格式 : <input type=search result=s> 

AMR EAS (Chrome) 如 图 3-12 Pra: 


| 提交 
图 3-12 


7. tel 输入 类 型 

说 明 : 此 类 型 要 求 输入 一 个 电话 号 色 ， 换 行 符 会 从 输入 值 中 去 反 。 因 为 不 同 国家 不 同 地 
区 的 电话 号 但 差别 明显 ， 所 以 想 要 添加 更 多 限制 可 以 使 用 下 一 下 会 讲 到 的 pattern 等 属性 。 

格式 : <input type=tel> 

8. color 输入 类 型 

说 明 : 一 个 非常 禾 酷 的 效果 ， 并 上 且 在 最 狐 的 Firefox, Chrome. Opera 浏览 器 中 都 文 持 ， 
可 让 用 户 通 过 闫 色 选 择 器 选择 一 个 闫 色 值 ， 以 十 六 进 制 保存 ， 可 以 通过 value 访问 到 ， 并 且 
WD Axe XH 

格式 : <input type=color> 

WN eS (Chrome) 如 图 3-13 所 示 : 

































色调 (E): 160 | 红 (R): 0 
饱和 度 (S): 0 绿 [G): 0 
规定 自 定义 颜色 REO) xy [0 | gu: 
取消 添加 到 让 定义 闫 色 (A) 








图 3-13 
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3.1.3 ”新 增 表 单 标签 


HTMLS 中 新 增 的 表单 标签 如 下 : 

1. datalist x 

WHH: datalist 元 系 规 定 输入 域 的 选项 列表 。 

列表 是 通过 datalist 内 的 option 元 系 创 建 的 。 

如 需 把 datalist 绑 定 到 输入 域 ， 用 输入 域 的 list 属性 引用 datalist 的 这 。 列 表 当 中 的 value 
属性 是 必须 的 ， 新 版 本 的 Chrome 和 Opera 支持 该 属性 。 

格式 : 


<Imeue | tyoe="texe" laist—"my list" placenolder—" 70 |) ae tH 7 7 
name="Seniority"> 

SOE lise ac “ah, Lagu 

some omnee look” value “MTM O SEE Hn 

<option labe l="Top-" value-"HTML5 Siki Hn 

sse onmlsb ei om. value="HTML5 2k Hn 

«/datalist» 


NER eS (Chrome) 如 图 3-14 所 示 : 








HTML5 实 战 宇 典 Tor 
HTML =s8 Tope 
HTML5 实 战 宇 典 Top: 


图 3-14 


2. keygen 标签 

说 明 : keygen TRAH Eet POSUER J^ HJ Ay aE 

keygen 7u3& EBA Eas MELLRE EN, SERATE, EMH AS 
铀 。 私 钥 存 储 于 客户 内 ， 公 钥 则 农 发 送 到 服务 硕 。 公 钥 可 用 于 之 后 验证 用 户 的 各 户 几 证书。 

格式 :用 户 名 :<input type="text" name="my_name" /> 

加 密 :<keygen name="security"> 

效果 展示 (Chrome) 如 图 3-15 所 示 : 














HP: AE: 2048 :高 强度 } "| | dm 
图 3-15 


3. output 标签 


WHH: output 用 于 计算 结果 的 输出 ，Firefox、Chrome、Opera 都 文 持 此 标签 。 
格式 : 


EM 
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emot > 
/ /页 面 加 载 完 成 后 执行 
window. onload=function() { 
/ / 3833 id FRNA PUR 


var number- document.getElementById('number'); 

var total-document.getElementById('total'); 

// 添 加 失去 焦点 事件 

number.onblur=function() { 

// 计 算 总 价 利用 单价 乘 以 数目 

var totalprice-parseInt (document.getElementById('price').value)*parseInt 
(this.value) 

// 将 结 采 得 出 

total values total price; 

j 

} 

ee 

<body 

Soon eron M 

Bp inpor eye went EL DIE 10 Tio a i mere e lepore ere b = 

ay Al:<input type="text" placeholder-" Wi AXE "id="number"> 

NO c= total! —/ omepur— 

«CU EGRE 

ao > 


MRE (Chrome) 如 图 3-16 所 示 : 


ET EUN | BB | 总 价 :60 
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3.2 TJ ZEE FH PATE TRI 








在 本 节 中 将 结合 HTMLS 来 制作 一 个 注册 页 面 和 一 个 登录 页 面 。 





3.2.1 注册 页 面 





C1) 首先 完成 表单 背景 的 制作 ， 给 表单 添加 一 个 背景 样式 ， 读 者 目 己 定义 即 可 。 


-div Glass— oq > 
«Ul Claw = 


(2) 将 整个 表单 分 为 三 个 fieldset 字段 组 ， 分 别 表示 账号 信息 ， 个 人 信息 和 联系 方式 ， 
最 后 还 要 加 上 拓 交 按钮 如 图 3-17 所 示 。 


<div class="bgv> 


m | 
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er 


-form ace lon" method=" posi 
<fieldset> 
EN | «/legend» 
</fieldset> 

<fieldset> 
«esed S legend 
</fieldset> 

<fieldset> 
<legend>IKA 7 XX«/ legend» 
< lt > 

< 

> 





联系 方式 


图 3-17 





(3) 第 一 部 分 账号 和 密码 。 一 般 在 注册 的 时 候 密 码 需 要 确认 ， 所 以 这 里 写 两 个 密码 
输入 框 。 

我 们 把 整体 结构 分 为 左右 两 部 分 ， 左 边 的 div 里 放 label 标签 ， 右 边 的 div 里 放 input 标 
签 ， 右 边 可 以 留 出 一 片区 域 ， 用 于 放 一 些 提 示 文 字 。 表 单 用 text 和 password RAY WE AY LA. 


«legend»llk (8 B</legend> 

<div class=" left- 

a tor—"accoune Nacsa label 

<7 dary 

“olive yells vao lou 

GUMOULE dox pe ^ tede v qe COUN 

<!-- 账 号 的 输入 框 采用 普通 的 text 类 型 就 足够 了 -> 

<div class="notice"> 请 输入 8 位 数 长 度 字 符 串 ,可 包括 数字 、 小 与 字母 或 者 大 写字 母 ， 不 
REMAT S </div> 

T 


EM 
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<div class="left"> 
e aa el 
<!-- 密 码 输入 框 一 般 采 用 上 type=password 这 样 输入 的 内 容 就 会 由 实心 圆 代 替 --> 
< clave 





<—Cinp@ lass — 1 leone 

Se Pac word nome Sesso cO - 9E So > 

Ao abe 

<div class 下 和 下 

abel or "OOS wor TN el 

</div> 

alque edicion 

<input type="password” name="my password2" id="password2" > 

«div class-"notice"»ZE BJ RBS ENDE EAR. WEBNS, FERRARA 
~A </div> 

T 


TEXX URAC RAPER S, PY DAI RRR, YA “MR Pa 








a Riu t HOCUS (oul le lox solid wed: | 


这 里 还 可 以 结合 JavaScript， 当 东 个 表单 控件 获得 焦点 时 ， 将 显示 后 面 的 提示 文字 如 网 3-18 
BIAS 





window. onload=function() { 

/ /获得 账号 表单 控件 的 引用 

var account-document.getElementById('account'); 
/ /获得 提示 文字 的 引用 

var notice-document.getElementsByClassName('notice!') 
// 账 号 控件 获得 焦点 的 时 候 触发 的 事件 

aceoumn ES GU fO CIUS TEE RE XT 

// 获 得 焦点 的 时 候 提示 文字 变 为 显示 状态 
notuoeelO0l sry le rdisplay—"bilock” 

} 

// 账 号 控件 失去 焦点 的 时 候 触 发 的 事件 

aCCou om Te mde 

// 失 去 焦点 的 时 候 提示 文 字 变 为 隐藏 状态 


noticelOl.style:display nome” 

















mew | 


图 3-18 
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(4) 第 二 部 分 个 人 信息 ， 包 括 姓 名 、 年 龄 、 出 生日 期 、 性 别 。 在 这 里 用 到 text, 
number, date, radio 等 类 型 ， 代 码 结构 与 第 一 部 分 大 致 相同 如 网 3-19 所 示 。 


人 

<div class="left"> 

“labeler — ramen Wh /Le 
> 








olive lose em eb 

Ee ex name mma me 

«Ul el 

Tea eri 

el 

«c Bero 

<div olase "Elo > 

em er mm ie es em 人 
<!-- 年 龄 这 里 设置 为 number 类 型 最 小 值 设置 为 0 最 大 值 设 置 为 99--> 
<7 Gay 

<div classo T leri" 

< er ee a ame 

ll 





< Cv lo I > 

ee Cece mn DM cM ecu 

<!-- 出 生日 期 使 用 data 控件 是 再 合适 不 过 的 了 可 以 很 方便 地 选取 日 期 --> 
<<) Cline 

<div class ene 

«label»TEJl:«/label» 

On > 





oi 7 ee 

< ae type="radio" name-"my sex" value="boy" ></label> 
el ne meme mm See" weder» S</ eee l= 
«UA Bs 


个 人 信息 





图 3-19 


(5) 第 三 部 分 包括 手机 和 号码 和 电子 邮件 ， 在 这 里 用 到 tel 和 email 类 型 如 图 3-20 所 示 。 


<legend> 联 系 方式 </legend> 
<div class="left"> 
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<label ror=" pensi 7) label — 

SACR 

<div @lass—"rE rghit) 

aC VOSS eel nom ESI gl el 
<!1=--=- 电 话 号 但 这 里 使 用 tel 控件 PIN ANS ih E--- 
se Gay 

<div class="left"> 

Te fon—"emanh SH ullis emen Ted Sri 

oa 

onec mS 

amos xe ewe" mewe-"wus Cie sob II Ne 
<!-- 电 话 号 码 这 里 使 用 email 控件 暂时 不 添加 其 他 验证 --> 


«ch 


EVE: 请 输入 手机 号 码 .… 


电子 邮件 : 请 输入 电子 邮件 -… 





图 3-20 


(6) 在 最 后 添加 一 个 提交 鬼 钮 。 


Gillie cioe use ia eae =e 
附 : 完整 的 CSS 样式 。 
/* 清 除 body 以 及 一 些 控 件 的 默认 边 距 属 性 设置 基本 的 文字 属性 */ 


bos > input, textarea, select optroni 
padding:0;margin:0;font-family: "TER"; 
font srze: p 

} 

a RNR, RE see WIDE O3 KAA / 
HOG: | 

width: 100p; hergnt: auto margin: 0 auto, 





Dackoround ur MPa- Po paddamg lO adnno Cop; 
Dackground s128: COn Lent, 

| 

/* 设 置 所 有 左 侧 控 件 名 称 部 分 样式 */ 








-left{ 
wdth 170p: herght: S00ox loati lert, 
text-align: night, lume-herght »s0px;mergium: tps Or padding- 


r igne: OP Color: ct 
} 
/* 设 置 所 有 右 侧 表单 控件 及 提示 文字 容器 样式 */ 
| 
有 


} 
35 | 
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/* 设 置 所 有 右 侧 提 示 框 样式 */ 
sroght nobrce! 
由 
Tont Salve sal oy eda ear eaoidust | OX odia eaae oie 





display: none; 

| 

/* 设 置 字 段 标题 样式 */ 

legendí 

codo o 0m ze id 

} 

/* 设 置 字段 组 样式 */ 

fieldset( 

border lox solid +555) nire lee pbinbeto X98 OTt e 0px; 

} 

/* WE label HAA 

labelícolor: ii i 

/* 设 置 表 单 控件 的 基本 样式 */ 

a | 

vidini 3 Oc meme 0p border: lox Sool + 

pox- shadow: O0 2p: Ip: tial inset; Pidding Jefl .200x eq ical align: 
middle; 

} 

/* 设 置 表单 控件 获得 焦点 通过 验证 时 的 样式 */ 

LN OWNER were LS! e zelo e | 

oue line: lox 7s olla bile: 

} 

/* 设 置 表单 控件 获得 焦点 未 通过 验证 时 的 样式 */ 


Input- ro Us- iv 





cüt ine: Ip Sol re red; 

j 

/* 设 置 单 选 控件 的 样式 */ 

vere [Mamie Sex| | 

width: -0px height: hap x > Lane height: Sp» 
border:0;border—-radius:0; box-shadow: none; 
outline: mone In Oran, 

} 

/* 设 置 提 区 按钮 的 样式 */ 

"quote. [Deme em 
width: OOo text depo eenter Pad no 0 
display: blockmaroin: 0px wale? Dackoround:HEorDEE: 
| 


3.2.22 SRA 





SEM UI, Ai Ai SA eA AE, RAS IE Store fee Al — “MF eB n] VJ 
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了 如 图 3-21 所 示 。 


«form action="post" id="my_ form"></form> 

<div class="left"> 

Abelson“ jcecolme MN < lapels 

«uU oasis 

"Solus e le ue dni > 

SV Ed mm 

<div class="left"> 

<label for "accoun 25e A eds 

o e 

< le 
wii 

selves 

ea 

<input ope eaei valee ea name on 
<input ype “submit” value=" a name sioni 
«f obse 


账号 : | 请 输入 账号 


附 : 完整 的 CSS 样式 。 
/* 清 除 body 以 及 一 坚 控件 的 默认 边 距 属性 设置 基本 的 文字 属性 */ 


body, input, textarea, Select, option, 
padding:0;margin:0;font-family: "TONER"; 
tont-srzesT4Dxs 

} 

/* 设 置 整个 背景 的 样式 */ 

.boxt 

uncle» 00r c hewohe- 00px background uri (ba. ILI) mare mm: 





auto; background sIze: Content: 
} 
/* 设 置 所 有 堪 侧 控件 名 称 部 分 样式 */ 
-left{ 
widhi: 120p: emcee: db 010! 9c toat lert; 
line- height: l00px: text-align: right; 








3 | 
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padding rige: (0 os Color: + taint: 

} 

/ KAMA C DURS ERU EE / 

| 

widrh: S00 Tren L000x loati left; 

line height? 100px; 

} 

/* 设 置 按 钮 容器 的 样式 */ 

mons E 

ele lies 00px eno: 100p; text align: c enler; line heighi: TOOP: 

} 

/ CELER RTEBIEEXX / 

DEDE, 

wlioel le0 x Men Gites Omi border: 1o oem ee cop. 

box-shadow: 0 2px lox fada Imset, padding lefi: mox ens ical align: 
middle; 

j 

/ * VEL CANDELA / 

input [name=login], input [name=sign] { 

width: 100px height: 0m acl eu cho fir hs 

Padding: 0 Tae orae we ghi: bold, 

CUr- Om: os 

} 

/* 设 置 提交 和 注册 按钮 被 单 击 时 的 样式 */ 

input [name=login] :active, input [name=sign] :activef{ 

box-shadow: none; 


SEAN SOR TUTE TEMS BERAWA P Wo] HTMLS 表单 的 新 的 验 








证 属性 和 其 他 的 一 些 功能 ， 从 而 让 表单 功能 更 加 完善 。 


3.9 REMUE 











HTMLS jelk f REWER np ELTE] SERE TERR IST HOD ALEEIRUES , d np EAS JI 725 
正则 验证 。 际 此 之 外 ，HTMLS5 还 提供 了 一 些 非 党 好 用 的 天 于 表单 操作 的 独 功 能 。 


3.3.1 表单 控件 中 新 增 的 功能 属性 








1. autofocus 属性 
说 明 :， 当 页 面 加 载 时， 自动 聚焦 到 某 一 个 表单 控件 上 。 值 为 Boolean 类 型 ， 一 个 文档 中 
只 能 有 一 个 表单 控件 具有 此 属性 。 


格式 : <input type="text" autofocus="true"> 


EM 
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2. placeholder 属性 
说 明 : 这 是 一 个 非常 好 用 的 属性 ， 它 会 展示 一 段 提 示 文 字 ， 当 单 击 输入 时 ， 残 会 目 动 隐 
jk, PANTI X AIER. 
格式 : <input type="text" placeholder=" 请 输入 账号 "> 
3. novalidate 属性 
说 明 : 此 属性 定义 form RARA input 标签 被 提交 时 不 用 经 过 表单 验证 。 


格式 : <input type="text" novalidate="true"> 





4. autocomplete 属性 

用 于 指示 input 7628 22 f BETA SERUM, OR SERVE E EH 2 V d APE. XX 
个 设 定 可 以 被 属于 这 个 form 的 子 元 素 的 autocomplete JE VEE gi o 

off: 在 每 一 个 用 到 的 输入 域 里 ， 用 户 必 须 显 式 的 输入 一 个 值 ， 或 者 document 以 它 自 己 
的 方式 提供 目 动 补 全 ; 浏览 器 不 会 日 动 补 全 输入 。 

on: 浏览 器 能 够 根据 用 户 之 前 在 form 里 输入 的 值 目 动 补 全 。 

格式 :<input type="text" autocomplate="on/off'> 

5. multiple 属性 

说 明 : 给 定 输 入 域 中 可 以 选择 多 个 ， 一 般 用 在 上 传 文件 或 者 提交 电子 邮件 地 址 的 时 候 ， 
ZME EHHE aJ 

格式 : <input type="email" multiple="multiple"> 


























3.3.2 REFF P AS see TE 


1. required 属性 
说 明 : VERTEBRAE ATS, ATU NAB PE AS Hu Uds E EZ 


格式 : <input type="text" required="required"> 
效果 展示 (Chrome) 如 图 3-22 所 示 : 





| || 提交 查询 


请 填写 此 字段 。 


图 3-22 


2. pattern 属性 

说 明 : 此 类 型 为 正则 验证 ， 可 以 完成 很 复杂 的 验证 。 

格式 : <input type="text" pattern-"^[0-9] {5}$"> 

CSS3 中 也 有 关于 表单 验证 的 伪 类 ， 比 如 说 能 够 验证 成 功 的 添加 伪 类 :valid。 验 证 不 成 功 的 


添加 伪 关 :invalid。 

















ALP OWNS oe: ya sire 
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eut ames lox solid plue; 
} 

LO: TOUS Tio el 
out hine: Ip solidi red, 


} 
效果 展示 (Chrome) 如 图 3-23 Br: 


123456 demo 


请 与 所 请 求 的 格式 祭 持 一 数 。 


图 3-23 


3. min 和 max 属性 











WHH: min 和 max 用 于 数值 类 型 的 表单 验证 ， 限 制 用 户 输 入 的 最 大 值 和 最 小 值 ， 


格式 : <input type="number" max="10" min="5"> 
NR HÉz« (Chrome) 如 图 3-24 所 示 : 


1 | | 提交 | H8 © cea 
BESRA TRST 5, 值 必须 小 于 或 等 于 10, 
图 3-24 


4. step 属性 

说 明 : step 控制 数值 输入 时 的 步 幅 。 

格式 : <input type="number" min="0" max="100" step="10"> 
效果 展示 (Chrome) 如 图 3-25 所 示 : 


10| =| | x 


图 3-25 








属性 值 


将 这 些 验证 规则 对 应 的 放置 到 上 一 节 写 好 的 表单 控件 中 ， 一 个 表单 验证 提交 的 页 面 融 完 





成 了 。 
如 : 在 电话 号 人 码 验 证 中 可 以 使 用 required 和 placeholder, pattern 等 属性 。 
< me type="tel" mene ie id="tel" requrlEd="repuired" 
placeholder- “Has cn Setter (0-9) Nem 





在 年 龄 的 验证 中 可 以 使 用 min 属性 、max Jag PE. required 等 属性 。 


nn qed 


"required"> 


最 终 界面 如 图 3-26 和 图 3-27 所 示 : 


EM 
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CE TEN Sz 





EL 3-27 


表单 新 增 的 验证 属性 可 以 帮助 我 们 更 快 地 完成 表单 验证 工作 。 本 书 附 录 B 中 还 提供 了 更 多 
天 于 这 些 属性 的 介绍 。 在 下 一 节 中 ， 我 们 将 结合 本 地 存储 ， 完 成 完整 的 登录 注册 过 程 。 





3.4 注册 和 登录 实战 


在 本 节 中 将 结合 后 人 台 PHP 和 数据 库 完 成 一 个 完整 的 登录 注册 功能 ， 运 行 环境 使 用 的 十 
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Wamp 集成 环境 ， 关 于 这 部 分 的 信息 读者 可 以 参考 本 书 附录 C. 
首先 是 HTML 布局 部 分 。 
登录 页 布局 部 分 : 


<!doctype html> 

<html lang="en"> 

<head> 

<meta charset-"UTF-8"» 
«title» SX Wu «c/title» 

<style> 

body, input, textarea, Selecot option] 
padding:0;margin:0;font-family: "TUER"; 
[onu Ic 

} 

Sere» 

widi n. 5:010 TOC 

height: 200px; 

Dacko ound: wie IL DI ee 

margin: 0 auto, 
baekareoume esee omen 

| 

e EE 

widi: 20px he gnt oOo x loai be EID 
line-height: 530px;text-align: do 
Padding rie: Op ol or; 

} 

et Oe 

wideh: 00px helighet: Ono sem o cues m ie 
line-height: s0px, 

} 

ne ont 

Wachee 500 5e height: Op ext en cmm C enc T ume helgir: 100p: 
} 

| 
机 
box-shadow:0 2px lpx #aaa inset; 
padding teme Dx 

vertical align:middle; 
border—-radiue: DD 

} 

input [name=login], input [name=sign] { 
WE T000: dale latere S00 Dac kor ound jie itie G 
Badding'0font weight:bold; 

Gum Son pnt 

| 


input [name=login] :active, input [name=sign] :activef{ 
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box-shadow: none; 
} 
</style> 
</head> 
“Dody 
Corm action aaeere vord (O Ed nm ormi orm 


<div class="box"> 

de 

e "ome los 4 leben 

</div> 

alque eiie scm eb 

We placeholder="ia@#iAMKS" autofocus-"true" 
gol seco 

«JJ Claw 

Sob vedere Jede 

> 

«c Br 

we 

ne Wn eer a E > 

< 

<div SS Uo 

I ee a ON ie Oren ES 

<imowe tvyoc=omerom! wellness a E Tor iby CIE o 

«eU obi 

x elbow 

</body> 

E ema 


AAU] 3-28 rz: 





图 3-28 


注册 页 布局 部 分 : 


soleret we en > 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
Sea ele PS ciples 
<style> 
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body, Input, textarea, select, op elon, 
padding:0;margin:0;font-family: "TUER"; 

tont size: lp; 

| 

-bg{ 

wideh: e Ono sehe mete = erste rm ats coepi Oe auto, 

Dackoround: url (bPa ly Padding: lO x ead imna T): 
Þackground size:content, 

} 

| 

wl he V Ops nn 0p; loat SIDE 

Ex alion Fale me inteso us elTe ee nr Op oa riolt: SO IOS Colom: Hi, 
} 

tele 

width: 4) reso bre mbeatp S Oops e cup lert mar uem lOp Oline height: (nod 
} 

Light .1oc Lee, 

alee lars 0px re lit 5 0ps ie e ctm rigar; 

tont sizo: lp; lince heihi: | x oolor: 90/05 
display:none; 

} 

legend{ 

Color: S25 Tont SLze .lex 

} 

fieldset { 

Border lox colid Ht Maen bortom: 0px; 

} 

kale colon t det 

a | 

wl -220px meneme: 0px Dorder: Ilion olid oo; 

box shadow: O 2px lpx taaa inset; padding left:20px/ vertical align: middle; 


Border radius: lo px; 


EM 


j 
We eesnm ma 
wale lw OO eos ou lon = (e Tec qe cole poner 
display:Dlock;/margin:l0px auto; background: mS 
</style> 
</head> 
Pon 
<div class Dg" 
-form aceon ava ripe on mer ods "Dose > 
<div class lee 
ET 
ww 
< Cl ctc 


<input type="text" name-"my account" id-"account" placeholder-" iB 4a A Jk 
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natern aa ZA ZO ONl9 Ss" autonocus—" ere" required—"reamared” autocomplate= 


Mist 





«div class="notice"> 请 输入 8 位 数 长 度 字 人 符 串 ,可 包括 数字 、 小 写字 母 或 者 大 写字 母 ， 不 
能 输入 符号 !</divVv> 

</div> 

<div class="left"> 

Tbb or "Sl ms label 

«dre hb 





<div -ellass—" right’. 

GIOVE IC WO MCI MM Wr er OS Wocqanesume =! ec re > 

«SU Cake 

<div Class — lemn. 

abe or sse mx label 

«Uf Clue 

som Class— Tio. > 

ecce nom na sw Se Pass "Obes cnm d regure di 

«div class="notice">#iGKARIBNKS Ze, 请 记 住 您 的 密码 > 证 且 你 持 两 次 密 人 码 竹 入 
Rda 

< /el 





<input type-"button" name-"my submit" value="e70"> 
PAROI 
cree se 
<< lovely 
<< lagen 


效果 截图 如 图 3-29 所 示 。 





LE 





图 3-29 





在 js 部 分 主要 是 利用 表单 验证 和 ajax 验证 结合 ， 对 于 必 填 字段 和 输入 格式 进行 验证 ， 
以 及 对 于 账号 是 盏 重复 与 数据 库 中 的 数据 进行 验证 对 比 。 
// 获取 要 操作 的 元 素 


var account- document. queryselector (Tkaccount"),; 











var passwordl=document.querySelector ("#password") ; 
var password2=document.querySelector ("#password2") ; 
var MoOrNCe—-dOCcUMentL., (UCD YSeleCcEOrAlLIN™  notuce”') > 
var form=document.queryselector ("form"); 


Var submit-document.qgueryselector ("type=submit"); 
d 账号 获得 焦点 是 显示 提示 框 
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accoune-onrocus—ituncre vom |) | 

moOemce (Oise ylew dis plav Merle eu 

j 

// 账号 内 容 改 变 并 失去 焦点 的 时 候 判 断 账 号 是 否 重 复 
account, Omehange—rumec Eom () | 

// 获取 账号 内 容 
var user=account.value; 

// 实例 化 ajax 对 象 
var xhr=new XMLHttpRequest (); 
// WOE ajax Wak 
xpo OPen (“POST electo 
// 发 送 头 信息 
xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); 
// 发 送 请 求 
xhr.send("user="+user) ; 
// 检测 ajax 状态 改变 
xhr.onreadystatechange=function () { 
// 当 啊 应 完成 时 
if (xhr.readyState==4) { 
// 当 啊 应 成 功 时 
if (xhr.status==200) { 
/ /接收 啊 应 的 结 
var text=xhr.responseText; 
// WR ARA O UHRA 4 DR 
if (text==0) { 
// 显 示 错 误 提示 
有 ee Clock 
notice[0].innerHTML2"iZ HP 44 p oR" 
/ /禁用 提交 按钮 


submit.disabled=true; 














}else{ 

// 否则 验证 成 功 

// 隐 藏 错误 提示 

monec style. cdm spia ne 

notice[0] .innerHTML=" 请 输入 8 位 数 长 度 字 符 串 ,可 包括 数字 、 小 写字 母 或 者 大 与 字母 ， 
不 能 输入 符号 1" 

// 恢 复 表 单 按钮 


submit.disabled=false; 











} 
} 
} 
j 


} 











PasswordZ ,onchange—1uncrion () 4 


/ / RG NET i 
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var pwl-passwordl.value; 
/ / RR RESIN A 
var pw2=password2.value; 
// 如 果 两 次 输入 不 相同 
if (pwl!=pw2) { 
// 显 示 错 误 提 示 
un sponso block”; 


submit.disabled=true; 








}else{ 

// 人 否则 隐 茂 错误 提示 

mot Loel lI ose lke] Ji -play "none"; 
submit.disabled=false; 

j 

j 
// 表单 提交 之 后 将 数据 保存 到 数据 库 中 
torm omubmle tunctenon( | 
// 实例 化 ajax 对 象 

var xhr=new XMLHttpRequest (); 
/ / BI. ajax Ak 
zar open expen c age eie o lero) 





/ RAK f 
xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded") ; 
// 发 送 请 求 
xhr.send("user="+account.valuet"&pass="+password2.value) ; 
// WOT ajax ASEH 
xhr.onreadystatechange=function () { 
// 如 来 啊 应 完成 
if (xhr.readyState==4) { 
// 如 来 啊 应 成 功 
if (xhr.status==200) { 
/ /接收 啊 应 的 数据 


var text=xhr.responseText 
/ /如果 为 1 则 说 明 注 册 成 功 ; 
if (text==1) { 
// 成 功 之 后 弹出 并 且 页 面 跳 转 到 登录 页 
alert ("i D) 


location hrei tese Dems 





} 
} 
} 
j 
} 








注册 成 功 之 后 束 是 登录 部 分 ， 在 登录 部 分 依然 是 通过 js 获取 输入 的 内 容 ， 通 过 ajax 发 
送 之 后 与 数据 库 的 数据 进行 对 比 。 代 人 码 如 下 : 
47 | 
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// 获取 要 操作 的 元 又 

var account=document.queryselector('faccount”™)> 
var password=document.querySelector ("#password") ; 
var login- -document .gqguery elector ("Iname login]. 
var sign- documenti .quervyoelector(” |name—si1gn |"); 
// ANEA PE R Tn 

Sam onclick -function()] 
location Aree Sian. nml 
j 

// Fi SES ARAR E GE 528008 P cB RIS EFT OT EG 

ie meom etim ede Tuneerom 

// 获 取 输 入 的 账 亏 值 

var user=account.value; 

// 获 取 输 入 的 密码 值 

var pass=password.value; 

// 实 例 化 ajax 对 象 

var xhr=new XMLHttpRequest () 

// 配 置 请 求 ; 

zar open Doe Oca pine jr, 

// 添 加 头 部 信息 

xhr.setRequestHeader ("Content-Type","application/x-www-form-urlencoded"); 
// 发 送 头 部 信息 

xhr.send ("user="+user+"&pass="+pass) ; 
// 检 测 ajax 事件 

xhr.onreadystatechange=function () { 

// 如 来 啊 应 完成 

if (xhr.readyState==4) { 

// 如 来 啊 应 成 功 

if (xhr.status==200) { 

/ /接收 啊 应 的 数据 

var text=xhr.responseText; 

// 如 过 返回 1 说 明 登 录 成 功 

if (text==1) { 

alert ("SRM") 

// 如 果 返 回 0 说 明 密 但 错误 

Yelse if (text==0) { 

alert ("ABB Vx") 

/ /如果 返回 2 说 明 账 号 错误 

else if (text==2) { 

alert ("账号 错误 ") 














} 
} 
} 
} 
} 








Iya a PHP 部 分 文件 ， 用 于 判断 用 户 名 已 经 存在 的 check.php。 
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<?php 
// 设 置 编 码 方式 
header ("Content-Type: text/html; charset=utf-8"); 
/ / RAP Z 
Ecc POST | Mase | 5 
// 连 接 数据 库 
ps 
// 设 首 数 据 库 编 但 方式 
se SSE cese (mE 
/ /但 询 语句 


Ssql="SHhECT user FROM login 7; 

/ /执行 查询 语句 

Pes MmYySol -query sei 

/ /处 理 拿 到 的 数据 
Sarr-ores-»fetch all (MYSOLI ASSOC) 
/ LABORO TREE ; 

Slen=count (Sarr) 

/ Di READE 

icu ol—O em 





// 如 果 有 这 个 用 户 名 
Li ($arr[$i] | "user" | IE RE 
/ /3&]n] 0 


echo. "0"; 
return 8 

} 

} 

/ / AEWRE] 1 
eehor “ab 


2> 


用 于 体 存 注册 信息 的 insert.php 


< Ph 

// 定 义 编码 方式 

header ("Content-Type: text/html; charset=utf-8") ; 
/ /连接 数据 库 
OO 
/ /获取 提交 的 用 户 名 

$us Tl Massie” |e 

/ /获取 提交 的 密码 

as so ni pease | 

/ /定义 但 询 语句 

Dep INSERT INTO T login ("user") password: )) VALUES usen) apasi)"; 
// 执 行 租 询 语句 

Sres=Smysql->query ($sql); 

/ / WURF] 1 

if (Smysql->affected rows==1) { 
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echo 
) 
?> 


用 于 验证 登录 的 login.php。 


<?php 

/ /设置 涉 部 。 编 码 方式 必须 和 html 的 编码 方式 一 样 

header ("Content-Type: text/html;charset-utf-8"); 
// 链 接 数据 库 ， 以 对 象 的 方式 去 创建 一 个 数据 库 链 接 

Ems = mysql ("NGealnest "soot", "teste ) 
// ”如 果 链 接 失 败 的 话 ， errno 这 个 函数 返回 错误 号 ，error 返回 错误 信息 
a (my cn onmes EHI M 

echo "链接 数据 库 失 败 " Sn. 

} 

/ /设置 但 询 数 据 库 时 候 的 编码 方式 

/ / V EL DR 7] X 

Suv eeu Set. cesset ("BEI 9 

/ /获取 提交 的 账号 

S$zhanghao-9 POST["user"]; 

// 获 取 提 交 的 密码 

-Bass POST pass | ¢ 

// 定 义 查 询 字 符 串 
RON OO 
// 执 行 得 询 ， 把 结果 集 存 在 一 个 变量 里 面 
Sres=Smysql->query ($sql); 

// 处理 结果 集 

Sarr=sres->fetch all (MYSOLI ASSOC); 

/ /如果 结 果 非 空 

a | 

/ /判断 账号 用 户 名 是 否 一 致 






































if (Szhanghao==Sarr[0] ["user"]) { 
/ AIT eA — 8X 
if (Spass==Sarr[0] ["password"]) { 


echo “i; 
telse{ 
echo ToT; 
} 

} 

Jjelse( 
echo "2"; 
} 

> 


这 样 ， 一 个 完整 的 登录 注册 尘 程 束 完 成 了 。 需 要 注 蕊 的 是 ， 这 个 流程 中 对 于 数据 的 安全 
性 没有 做 进一步 处 理 ， 这 种 方式 可 以 给 大 家 做 为 一 个 参考。 
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文件 处 理 和 拖 搜 一 文件 上 传 实战 





本 章 重 点 知识 
4.1 File API 


4.0 HTMLS 拖 搜 事件 
4.3 dataTransfer 对 象 
4.4 利用 拖 搜 效果 完成 上 传 功能 


HTML5 
BEEN v5 

对 文件 的 处 理 和 上 传 等 操作 一 直 是 Web 开发 中 的 一 项 重要 环节 ,比如 在 填写 个 人 信息 时 
的 头像 上 传 ， 或 者 是 邮件 的 上 传 等 。 传 统 的 上 传 方式 通过 HTML input 表单 上 传 ， 通 过 提交 
按钮 直接 提交 到 指定 的 后 台 文 件 去 处 理 ， 这 种 方式 对 于 监测 上 传 的 进程 是 非常 不 利 的 。 
HTMLS 中 提供 了 File API, File Reader API 等 来 帮助 我 们 操作 和 处 理 文件 ， 而 拖 搜 也 是 获取 
上 传 文件 的 一 种 方式 ，HTIML5S 中 新 增 的 拖 搜 事 件 不 仅 可 以 处 理 在 页 面 中 的 操作 ， 也 可 以 由 
在 浏览 右 外 发 生 的 拖 搜 来 触发 。 拖 搜 的 文件 也 可 以 由 File 对 象 接 收 到 ， 也 就 是 说 ， 我 们 现在 
可 以 直接 通过 HTMLS 实现 拖 搜 文件 上 传 功能 了 ! 

本 章 的 主要 内 容 : 

4.1 利用 File API 上 传 文件 的 介绍 ， 包 括 : File API, File Reader API, Formdata 等 介 
绍 ， 使 用 这 些 技术 ， 完 成 一 个 通过 input 上 传 并 显示 上 传 进度 的 功能 。 

4.2 HTMLS 拖 搜 事件 人 简介， 包括 : ondragstart, ondragend. ondragenter. ondragover. 
ondrop、ondragleave 等 事件 。 


4.3 dataTransfer 对 和 象 是 由 拖 搜 产生 的 事件 对 象 的 一 个 属性 ， 包 含 被 拖 搜 元 素 的 详细 

















小 


结合 拖 搜 事件 和 File API 完成 一 个 拖 搜 上 传 头 像 的 案例 。 


4.1 File API 








HTMLS File API， 是 改善 基于 浏览 器 的 Web 应 用 程序 处 理 文件 上 传 的 方式 ， 使 文件 直 
接 上 传 成 为 可 能 。 我 们 可 以 通过 input 标签 获取 上 传 的 文件 ， 或 者 是 直接 通过 由 拖 放 操作 生 
成 的 dataTransfer 对 象 获取 文件 。 在 获取 到 文件 之 后 ， 我 们 还 可 以 通过 File Reader API Kik 
取 文 件 的 信息 ， 实 现 对 于 上 传 文件 的 显示 ， 或 者 是 对 于 上 传 进度 进行 监测 等 效果 。 

在 上 传 处 理 中 ， 我 们 第 用 到 的 对 象 有 File 对 象 、Formdata X., File Reader 对 象 等 ， 并 
且 如 条 我 们 想 要 真正 实现 上 传 功能 ， 当 然 也 离 不 开 Ajax 和 后 台 处 理 程序 。 在 本 市 中 您 将 会 
了 解 一 个 上 传 文件 的 案例 ， 并 且 包 含 上 传 之 后 的 显示 以 及 进度 显示 等 功能 。 























4.1.1 File 





File 对 象 是 来 目 用 户 在 一 个 <input> 元 素 上 选择 文件 后 返回 的 FileList 对 象 ， 也 可 以 是 来 
目 由 拖 放 操作 生成 的 dataTransfer 对 象 。 


«input type="file"> 


在 HTMLS 的 表单 中 可 以 设置 multiple 属性 ， 所 以 通过 input， 我 们 也 可 以 直接 上 传 多 个 
文件 ， 在 js 中 获取 到 input 控件 后 ， 可 以 直接 通过 对 象 的 files 属性 访问 上 传 文件 的 集合 
Filelist。 在 这 个 集合 中 包含 上 传 的 每 一 个 文件 以 及 集合 的 长 度 属性 。 

集合 当中 的 某 一 个 元 素 就 是 一 个 File 对 象 ， 这 个 对 象 属性 如 下 : 

lastModifiedDate: 当前 File 对 象 所 引用 文件 最 后 修改 时 间 ; 

name: 当前 File 对 象 所 引用 文件 的 文件 名 ; 

size: 当前 File 对 象 所 引用 文件 的 文件 大 小 ,单位 为 学 市; 
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type: 当前 File 对 象 所 引用 文件 的 文件 类 型 CMIME 类 型 )。 
利用 这 些 属性 可 以 轻易 的 完成 一 些 关 于 文件 上 传 类 型 ， 上 传 大 小 ， 文 件 格式 等 常见 的 验 
证 判断 。 





4.1.2 FormData 


通常 我 们 提交 (使 用 submit button) 时， 会 把 form 中 的 所 有 的 表单 元 素 的 name 与 
value 组 成 一 个 查询 字符 串 ， 提 交 到 后 台 。 但 当 我 们 使 用 Ajax 提交 时 ， 这 个 过 程 束 要 变 成 人 
工 的 了 。 因 此 ，FormData 对 象 的 出 现 可 以 减少 一 些 工 作 量 。 

修改 或 者 获取 FormData 有 三 种 方式 : 

(1) 创建 一 个 空 的 FormData 对 象 ， 然 后 再 用 append 方法 逐个 添加 键 值 对 。 








EN 
Formdata.append ("name","zhangsan"); 


Formdata.aopend (fi leob)) ; 


(2) 获取 到 form 元 素 对 象 ， 将 它 作 为 参数 传递 到 FormData 中 。 


var formobj-document.querySelect ("form"); 


var formdata-new FormData(formobj); 


(3) 利用 form 元 桑 对象 的 getFormData 方法 生成 。 


var formobj-document.querySelect ("form"); 


var formdata-formobj.getFormData(); 


4.1.3 File Reader 





使 用 File Reader {Ai Web 应 用 程序 可 以 措 步 的 读 取 存储 在 用 户 计 算 机 上 的 文件 (或 者 原 
始 数 据 绥 冲 ) 内 容 ， 可 以 使 用 File 对 和 象 或 者 Blob 对 象 来 指定 所 要 处 理 的 文件 或 数据 。 其 中 File 
对 象 可 以 是 来 和 目 用 户 在 一 个 <inpu 人 元 素 上 选择 文件 后 返回 的 FileList 对 象 ， 也 可 以 来 目 拖 搜 操 
作 生 成 的 dataTransfer 对 象 ， 还 可 以 是 来 和 目 在 一 个 HIMLCanvasElement 上 执行 mozGetAsFile() 
方法 后 的 返回 结果 。 

要 得 到 一 个 File Reader 对 象 很 向 单 : 








Var fr=new FileReader (); 


File Reader 对 和 象 有 四 个 方法 : abort. readAsDataURL 、  readAsText 、 
readAsBinaryString， 其 中 abortO 用 于 停止 操作 ， 后 面 三 个 分 别 表 示 将 文件 读 取 为 DataURL, 
该 取 为 文本 、 谈 取 为 二 进 制 编码 。 无 论 读 取 成 功 或 失败 ， 这 几 个 方法 都 不 会 返回 任何 纤 
返回 的 结果 存储 在 对 象 的 result 属性 当中 。 

File Reader 对 象 还 有 一 系列 的 事件 用 来 检测 读 取 的 状态 ， 包 括 onabort 中 断 、onerror 出 
H. onloadstart 开始 、onprogress 正在 读 取 、onload 成 功 读 取 、onloadend 读 取 完成 ， 不 论 是 


否 成 功 都 会 触发 。 
53 | 
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4.1.4 Ajax 4H Upload 


Ajax 是 用 来 异步 操作 数据 的 一 种 技术 ， 使 用 Ajax， 我 们 可 以 将 获取 到 的 FormData 对 象 
通过 send 传递 到 后 人 台 处 理 程序 ， 在 Ajax 中 内 置 了 一 个 Upload 对 象 ， 这 个 对 象 映 上 有 三 个 事 
件 ， 分 别 是 onprogress 表示 正在 上 传 、onloadend 表示 上 传 完成 、ontimeout 表示 请 求 超时 。 

onprogress 事件 的 事件 对 象 中 包含 两 个 属性 loaded 和 total， 分 别 可 以 表示 已 经 上 传 完 成 
的 数据 量 和 总 的 数据 量 。 利 用 这 些 数据 ， 我 们 可 以 制作 上 传 进度 条 效果 。 

案例 : 通过 input 实现 图 片上 传 。 


<head> 























<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
“Ciel Pocumene mile 
<style> 

.container { 
pox sizing:bDorder box; 
widim: d40d4px neroni: 00px; border: lp: olid cele tes 
loo cler radius: px; 
padding top: 20px; 
ÞDackground: linear gradient (to bottom tO0ff ,Off 20px, transparent 0); 
margin: 0 ati oO; 

| 
INED NER | 
padding: O margin: Or 
border:none; 

} 

Container Inputitype Tilelli 
width: -200px height: 0px; 
Porder: lp olid Hc ee, 
background color: 7EFFD4; 
Colore t o sse 

float:left, 

} 

Contamner noutltyvoe outeonmll 
widen: 100px ne mentam 2p; 

Plod emu, 
bouGden Ip sole eee 
Goes chs beat 

j 
progressi 
eim nva s 
width:400px; 
Re 0px, 
teurer pt Eo 


} 
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.Showarea( 
widihn: 90/010» manehne e ate 20) Ops E 
bender: p old eee. 
margin: Opx ell Or 

} 

.Showarea h3{ 
wide ae OOpa 
margin: 0rauto; 
line-height: 60px; 
text aligo: center: 
berder GotEEom: lex solid Foco; 
color: oloo; 

} 

. sShowareaimg { 
max width:100; 

} 
</style> 
</head> 
soos 
<div Cclass—="Ccontainer .> 
<input type="file"> 
<input oe burton veal "|e" 
<div style="clear:both"></div> 
<progress value="0" max="100"></progress> 
anv 
<div class="showarea"> 
<h3> 显 示 区 域 </h3> 
Ac 
<<) oC 


布局 部 分 包含 三 个 模块 上传 提交 模块 、 进 度 显 示 模 块 、 图 片 显 示 模 块 ， 效 果 
如 图 4-1: 


= 
e 


i... | 未 选择 文件 。 Iff 


显示 区 域 


图 4-1 
Js 部 分 : 


Re 


// 获取 相应 的 DOM 对 象 


| 
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var Tile=docoument .queryoeleetor(" |ryoe—ra lel): 
var sub-document.querySelector("[type-button]"); 
var show-document.querySelector(".showarea"); 


var progress=document.querySelector ("progress"); 
// 给 上 传 按钮 添加 点 击 事件 
sub onclick fúünctilonl(e)| 

// 获 取 文 件 对 象 因为 是 集合 所 以 选择 第 0 个 
| 
EE formdata WR 
var formdata-new FormData(); 
// 将 文件 对 象 添加 到 formdata 中 
formdata append (“uploadi fi leon, ) ; 
// 实例 化 ajax 对 象 
//var xhr=new XMLHttpRequest () ; 
// 实例 化 文件 读 取 对 象 
var fr-new FileReader(); 
// 将 数据 读 取 为 地 址 信息 
fr.readAsDataURL(fileobj) 
trcondboad-tunctron(e 
// 创建 img 标签 
var img-document.createElement ("img"); 
/ / 将 图 请 路 径 设 置 为 读 取 到 的 地 址 
img.src=this.result; 
// 将 图 族 添 加 到 显示 区 域 中 
show.appendChild (img) 

j 
// 注册 文件 上 传 中 事件 
xhr uload onprogress—runcEelon (ec) 
// 获 取 当 前 上 传 进度 传递 到 progress 中 显示 
progress.value-parseInt(e.loaded/e.total*100) 
} 
// BOS ajax wk 
zareo open OOS. ake okie. 
// 发 送 请 求 
xhr.send(formdata) ; 
} 
Se 


附 后 台 部 分 代码 ， 文 件 运 行 在 Wamp 集成 环境 中 ， 更 多 关于 Wamp 的 安装 信息 ， 请 关 
注 本 书 附录 Co 











PRD 
aie (Ls trolleaclocl ile (US. ccs IE me 10) 0 
Mewes Ujoleecdecl Tte (3 Luss [| toleecl’ | | wus meme 155/1119. ius 
PP uptoad ] name" |) z 
by 
Er. 
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上 传 之 后 的 效果 如 图 4-2 Bron: 





4-2 





4. HTML5 拖 搜 事件 


HTMLS 提供 了 拖 搜 API 效 末 ， 且 在 各 个 浏览 器 中 都 有 很 好 的 文 持 ， 可 以 实现 一 些 拖 搜 
上 传 、 拖 搜 移动 、 拖 搜 删 除 等 效果 ， 原 先 我 们 想 要 实现 拖 搜 的 效果 需要 借助 Javascript 中 的 
onmousedown, onmousemove, onmouseout 这 些 事件 来 处 理 。HTMLS 对 拖 搜 事件 进行 了 更 
加 详细 的 划分 ， 包 括 拖 搜 开始 (ondragstart)、 拖 搜 结 束 (ondragend )、 进 入 目标 区 域 
(ondragenter)、 在 目标 区 域 移动 (ondragover)、 投 放 到 目标 区 域 时 (ondrop)、 从 目标 区 域 离 
JF Condragleave) 等 事件 。 本 节 会 对 这 些 事件 进行 详细 的 介绍 。 








4.2.1 draggable 属性 





想 要 在 某 个 元 素 上 使 用 拖 搜 ， 这 个 元 素 必须 具备 draggable 属性 。 这 个 属性 有 三 个 值 
true, false 或 者 auto. true 表示 可 以 拖 动 ，false 表示 不 能 拖 动 ，auto 表示 根据 浏览 右 的 情况 
目 行 判断 。 给 一 个 div 添加 上 draggable 为 tue， 这 个 div 39 n] LA PHBA T o 

格式 :<div draggable="true"></div> 


4.2.2 ondragstart 事件 


ondragstart 表示 被 拖 搜 对 象 开始 被 拖 动 ， 作 用 于 拖 搜 对 象 ， 例 如 : 
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实战 宝典 
<head> 


<meta charset-"UTF-8"» 

sume Document Eees 

Ss Cilia 

window. onload=function () { 

// 获 取 被 拖 搜 的 对 有 象 

var ime=doeument ceUeryoelecotor( demo am!) 
/ /获取 投放 区 域 对 象 

var demo2=document.querySelector(".demo2") ; 
// 添 加 拖 搜 开 始 事件 

IMmg.Ondragcteart—runet1on{) | 

// 拖 搜 开 始 事件 处 理 程序 

demo2 .innerHTML=" 拖 搜 开 始 " 

| 

} 





< oerip 

<style> 

/ * ERT EE S MEE A * / 
. demo { 


waltl: DOT d Nergnt: 00px border: p: ol Ted; 

} 

/* 给 投放 区 域 对 象 添加 样式 */ 

. demo2 { 

voro bed gue 22100 Toe ements OW Omer. lex -olid gogreen; 
| 

</style> 

</head> 

<body> 


<div elass=" demo "> 


<img src="demo.jpg" alt-"" draggable-2"true" width="100" 
«obs 

«div class="demo2"></div> 

body 


AM EAS (Chrome) 如 图 4-3 所 示 。 














图 4-3 
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height="100"> 
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4.2.3 ondrag 事件 


ondrag 事件 表示 元 素 被 拖 动 的 过 程 中 触发 的 事件 ， 作 用 于 被 拖 搜 对 象 ， 例 如 : 


le 
// 添 加 拖 搜 事件 
nme em 
demo2 .innerHTML=" 拖 搜 中 " 
} 

sedes 


A (Chrome) 如 图 4-4 所 示 。 

















图 4-4 
4.2.4 ondragend 事件 


ondragend 事件 表示 拖 搜 对 象 拖 搜 结束 ， 作 用 于 拖 搜 对 象 ， 例 如 : 


IgE 
<! —- YS FBTR ATR SMT--» 
img.ondragend=function () { 
demo2 .innerHTML=" 拖 搜 结束 " 
} 

[H.E 


效果 (Chrome) 就 是 在 放 开 被 拖 搜 对 象 时 demo2 中 会 啊 应 这 个 事件 如 图 4-5 所 示 。 




















4.2.5 ondragenter 事件 





TEHI-- A bebe tk, (uev EROBUCEU Y Det, iu Hy DS USE, he BETES 
和 是， 这 里 的 进入 指 的 是 鼠标 的 进入 ， 不 是 拖 搜 对 象 的 进入 。 例 如 


EE 
eee omaia Umen RE 
demo2 .innerHTML=" 进 入 目标 区 域 " 
} 

Sms 


a EAS (Chrome) 如 图 4-6 所 示 。 







图 4-6 


4.2.6 ondragover 事件 





ondragover {FH FB tk, EE iva Ze A pK A) BS, CT SEES 
复 触 发 ， 在 拖 搜 元 素 时 ， 每 隔 350 坚 秒 会 触发 ondragover 事件 。 例 如 


Fe) ale 
demo2.ondragover=function() { 
var word=document.createTextNode (" 在 目标 区 域 移动 ") ; 
demo2.APPendChild(words) ; 


} 
[H.E 


效果 展示 (Chrome) 如 图 4-7 所 示 。 


EM 


4.2.7 ondrop 事件 










在 目标 区 域 移动 在 目标 区 域 
移动 在 目标 区 域 欧 动 在 目标 
区 域 移动 在 目标 区 域 乏 动 在 
Sane ae Bn 
pee DUEB 


目标 区 域 移 pe Rina 


GEI NM SMTE 
标 区 域 移动 在 目标 区 域 移动 
在 目标 区 域 移动 在 目标 区 域 
移动 在 目标 区 域 移动 在 目标 
区 域 移动 在 目标 区 域 移动 在 


B AnI mbizr-zhzr EE biz 
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表示 拖 搜 对 象 被 投放 在 投放 区 域 后 触发 的 事件 ， 作 用 于 投放 区 域 。 需 要 注意 的 是 ， 需 要 
使 用 ondrop 事件 时 ， 必 须 把 ondragover 事件 的 浏览 器 默认 行为 阻止 掉 。 例 如 : 


| 


demo omncs or dme one 


e&opieveniDej seu. 6t) 


demo2.1inne rHTML=" 投 放 完 成 ae 


} 


demo2.ondragover=function (e) { 


e.preventDefault(); 
} 
j 

.同上 


HE (Chrome) 如 图 4-8 所 示 。 





图 4-8 





— | 
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4.2.8 ondragleave 事件 


ondragleave 事件 表示 被 拖 搜 对 和 象 从 投放 区 域 离开 时 触发 的 效果 “(Chrome )， 如 图 4-9 
所 示 。 


. .同上 
demo2.ondragleave=function () { 
demo2 .innerHTML=" 图 片 从 目标 区 域 离开 " 
} 

. .同上 








图 4-9 


完成 一 次 页 面 内 元 素 拖 搜 的 行为 事件 过 程 ， 对 于 被 拖 搜 :ondragstart 一 ondrag 一 
ondragend; 对 于 投放 区 域 :ondragenter 一 ondragover 一 ondrop 一 ondragleave。 完 成 一 个 功能 3 
不 需要 把 每 一 个 都 去 调用 ， 我 们 只 需要 选择 几 个 需要 的 就 可 以 了 ，HTML5 为 了 更 加 方便 去 
传递 一 些 拖 搜 当 中 的 数据 ， 还 提供 了 dataTransfer 对 象 ， 下 一 节 将 会 详细 的 介绍 这 个 对 象 的 
属性 和 方法 。 








4.3 dataTransfer 对 象 


dataTransfer 对 象 提 供 了 对 于 预定 义 的 剪贴 板 的 访问 ， 它 属于 拖 搜 事 件 对 象 的 属性 ， 所 
以 要 先 访 问 到 事件 对 象 以 便 在 拖 搜 操作 中 使 用 。 人 简 而 言 之 ， 束 是 在 进行 拖 搜 操作 时 ， 可 以 在 
拖 搜 开始 的 时 候 获 取 拖 搜 对 象 的 数据 ， 在 拖 搜 结束 的 时 候 又 可 以 对 这 些 数 据 进行 操作 。 








4.3.1 dataTransfer 对 象 的 属性 


(1) dataTransfer.dropEffect 设置 或 返回 目标 上 人 允许 发 生 的 拖 搜 操作 ， 可 以 设置 “null? 
“copy”“1link” 和 “move“ 这 四 个 值 之 一 ， 但 是 如 果 设 置 的 值 不 在 dataTransfer.effectAllowed jt 
许 的 操作 中 ， 则 此 拖 放 效果 会 失效 ， 默 认 值 是 none. 

(2) dataTransfer.effectAllowed 返回 允许 执行 的 拖 搜 操作 效果 ， 可 以 设置 修改 ， 包 含 这 
wef: “none”“copy”“copyLink”“copyMove”“link”“linkMove”“move”“all” 和 和 


EM 
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“uninitialized”. 
(3) dataTransfer.types: 返回 在 dragstart 事件 触发 时 为 元 系 存 储 数据 的 格式 ， 如 末 是 外 
部 文件 的 拖 搜 ， 则 返回 “flles”。 
(4) dataTransfer.items: 返回 DataTransferltems 对 象 ， 该 对 象 代 表 了 拖 动 数据 。 





4.3.2 dataTransfer 对 象 的 方 ; 


(1) dataTransfer.setData 〈format,data)， 用 于 将 指定 格式 的 数据 赋值 给 dataTransfer 对 
B, format 代表 数据 的 类 型 ， 比 如 ，text、url 等 ，data 表示 要 设置 的 数据 。 
(2) dataTransfer.getData (format), 55 setData 对 应 ，getData 用 于 获取 数据 。 例 如 : 


<!doctype html> 

<html lang="en"> 

<head> 

«meta charset="UTF-8"> 
«mede ocurren 
SOS INO 
window.onload=function() { 
/ / RAFT Be FCI IX X 


Wee line Sco eC bineinc sedere vise rece one (" Clee acer e 





var demo2=document.querySelector(".demo2") ; 

// 在 拖 搜 开始 的 时 候 获 取 图 片 的 sre 属性， 保存 到 dataTransfer WRE. 
img.ondragstart-function (e) { 
e.dataTransfer.setData("url",this.src); 

} 

// 阻 止 ondragover HFR ÆW AY hi aR AT A o 
demo2.ondragover=function (e) { 
e.preventDefault(); 

} 

/ /投放 结束 的 时 候 获 取 dataTransfer 对 象 上 的 保存 的 值 。 创 建 一 个 新 图 片 ， 插 入 到 容 髓 中 。 
demo-  ondrop ~ function(e) 

var src-e.dataTransfer.getData ("url"); 

var img-document.createElement ("img"); 
"WIS = 

demo2.APPendChild(img) 

} 

} 

<7) SCI 

<style> 

.demo { 

width: lOGpx,; heroin: 100px; border: lox solid red; 

} 

. demo2 { 

width: -00px height: 200Bx border: PpP -olid oreen; 
| 


_ | 
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img { 


width: 100px height: LOOP; 
| 

</style> 

</head> 

<body 

<div class="demo"> 

<img sre" demo. oe "alt="" draoggable = i rue t= 
< 

<div class="demo2"></div> 
</body> 

<j Inne 


Fil) Hioc CR Ben TRI EA siu — 1 18] LBS Pr 22 HBR Chrome), WE 4-10 所 示 。 


4.4 





图 4-10 


利用 拖 搜 效果 完成 上 传 功能 








在 本 节 中 ， 我 们 将 结合 drag 和 File API 完成 一 个 拖 搜 上 传 头 像 的 和 案例。 在 投放 区 域 的 ondrop 





事件 中 获取 dataTransfer 对 象 ， 在 dataTransfer 中 可 以 获取 到 拖 搜 的 文件 信息 ， 通 过 Ajax f£ 


XE SIUE A 
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， 后 台 将 上 传 图 片 的 路 径 返 回 ， 然 后 在 对 应 的 区 域 显示 。 


<!doctype html» 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
Speke Dooumene s eate dl 











uc GUN S 
window.onload=function() { 
// 获取 需要 的 元 素 


var head-document.querySelector(".head"); 





var droparea-document.querySelector('.droparea'); 


// 定义 一 个 开关 用 来 绑 定 事件 

var flag=true; 

// 添加 事件 处 理 上 传 区 域 的 显示 和 隐藏 
head one a kE rUn on 

If (ilag) 
droparesa:style di- -play "Lheock ue 

Jjelse( 
droparea style display mone 
} 
flag=!flag; 

}; 

// 给 投放 区 域 深 加 投放 事件 

droparea ongdrop=funet Lon (e) { 
e.preventDefault(); 

// 获 取 文 件 对 象 

var fileobj=e.dataTransfer.files[0]; 
// 实 例 化 formdata 对 象 

var formdata=new FormData(); 

// 将 文件 对 象 添 加 到 formdata 中 
tTormata append( "ueload aseo) 
// 实例 化 ajax WH 

var xhr=new XMLHttpRequest (); 

// 实例 化 文件 读 取 对 象 

zar open pos tensor es 

// 发 送 请 求 

xħhr.send(trormdata)? 

// 注册 Ajax 上 传 完 成 事件 
xhr.onreadystatechange=function (e) { 
// 当 整 个 上 传 过 程 完成 时 
in (xhr readvySrare=—"4") 4 
// 当 返 回 的 状态 但 为 成 功 或 者 未 修改 时 
if (xhr.status=='200'||xhr.status=='304') { 
// TS Sk BB 
droparea.style.display='none'; 

// FRE 
flag=true; 

/ /获取 返回 的 数据 

var src-xhr.responseText; 

// Bi — Sik Er 

var img-document.createElement ("img"); 

// 将 图 请 路 径 设 置 为 读 取 到 的 地 址 
I Eeo; 

// 将 图 请 添加 到 对 应 区 域 中 
Tiesadgeappenaehnolenmna)、 

} 

} 








文件 处 理 和 拖 搜 一 一 文件 上 传 实战 


s] 





文件 处 理 和 拖 搜 一 一 文件 上 传 实 战 


</style> 

</head> 

qoo 

«div class="head"></div> 

«div class-"droparea"»[ji&jA& H8 Fr Six </div> 


voe 
«altem 
AUR AE 4-11. 4-12 Pras. 
Ef: 
十 
拖 搜 照 卢 到 这 里 
图 4-11 
上 传 成 功 之 后 





图 4-12 


HTMLS HER SCARCE AE UD ba PH ERS S BUTSA TETEIBRBRUT] IE 20 bias 








中 还 需要 处 理 一 些 细节 。File API 除了 在 正中 有 部 分 功能 不 被 文 持 之 外 ， 第 用 的 功能 还 是 可 
以 正常 使 用 的 ， 所 以 ， 拖 搜 和 FileAPI 还 是 很 值得 我 们 研究 和 使 用 的 。 关 于 拖 搜 和 文件 处 理 








API 的 部 分 ， 读 者 可 以 参考 本 书 附录 。 


e | 
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客户 端 存储 一 一 在 线 可 编辑 表格 实战 


5.1. Aum ea a 


Cookies 从 JavaScript 出 现 之 初 束 一 直 存 在 ， 所 以 在 Web 上 存储 数据 并 不 是 个 新 概念 。 








不 过 Web 存储 是 数据 存储 的 一 种 更 强大 的 版 本 ， 它 可 提供 更 多 有 的 安全 性 、 吻 用 性 和 更 快 的 
速度 。 在 Web 上 还 可 以 存储 相当 大 的 数据 ， 上 基体 的 大 小 取决 于 Web 浏览 器 ， 但 通常 都 在 SMB 
到 10MB 之 间 。 这 对 于 一 个 HTML 应 用 程序 而 言 已 经 足够 大 了 。 为 一 个 好 处 是 此 数据 并 不 
会 在 每 次 出 现 服务 大 请 求 时 都 被 加 载 。 唯 一 的 限制 是 不 能 在 浏览 器 之 间 分 享 这 些 Web 存储 ， 
BIURE Safari 中 存储 了 数据 ， 那 么 该 数据 在 Firefox 中 是 无 法 访问 的 。 内 置 到 HTMLS 中 的 
Web 存储 对 象 有 两 种 类 型 

sessionStorage 对 象 负责 存储 一 个 会 话 的 数据 。 如 果 用 户 关 财 了 页 面 或 浏览 器 ， 则 会 销 
毁 数 据 。localStorage 对 象 负责 存储 长 期 的 数据 。 当 Web Wisk as, ie tee 
数据 的 存储 ， 当 然 这 还 取决 于 浏览 器 设置 的 存储 量 。 这 两 种 存储 对 象 具 有 相同 的 方法 和 属 
性 。 为 了 获得 一 致 性 ， 本 书 在 所 有 的 示例 中 使 用 的 都 是 localStorage 对象。 下面， 将 了 解 Web f£ 
储 的 强大 功能 ， 以 及 它 成 为 优 于 Cookies 的 一 种 存储 方式 的 原因 。 我 们 还 将 探索 基本 的 Web 存 
储 概念 、HIML5 Web 存储 方法 和 浏览 器 支持 。 

几乎 所 有 主流 浏览 器 均 文 持 Web 存储 特性 ， 这 些 浏览 器 包括 Firefox. Chrome, Safari, 
Opera 和 Microsoft IE 8.0 以 上 版 本 。 但 是 IE 7 和 更 早 版 本 不 文 持 Web 存储 。 

HTMLS Web 存储 的 浏览 器 文 持 十 分 实用 ， 但 是 ， 较 旧 的 浏览 器 需要 在 使 用 之 前 检查 
Web 存储 文 持 的 浏览 器 。 这 种 检 答 非常 简单 ， 可 以 使 用 一 个 简单 的 条 件 语 句 来 个 看 HTMLS 
存储 对 象 是 否 已 经 定义 。 如 果 已 经 定义 ， 就 可 以 放心 进行 Web 存储 脚本 编写。 如 果 未 定 
义 ， 而 数据 存储 又 是 必需 的 ， 则 需要 采用 一 种 备 选 方法 ， 比 如 JavaScript Cookie. 

以 下 代码 显示 了 一 种 简单 的 为 Storage 对 象 进行 浏览 右 检 查 的 方式 。 


if (typeof (Storage) !== "undefined") { // Web storage is supported } 





















































else { // Web storage is NOT supported } 


5.2 利用 localStorage API 管理 数据 








localStorage 是 一 种 永久 在 本 地 保存 数据 的 方式 ， 存 储 的 数据 量 大 ， 存 储 的 数据 在 当前 域 
名 下 都 访问 ，localStroage 是 window 对 和 象 下 的 一 个 属性 ， 所 以 访问 它 的 时 候 可 以 不 写 window. 


1. 如 何 检 测 浏览 器 是 否 支 持 





if (window. localStorage) { 

alert ("Wil asic localStorage") 
}else{ 

alert ("浏览 右 不 文 持 localStorage") 
} 


2. 如 何 添 加 数据 
添加 数据 是 通过 键 值 的 方式 加 载 的 ， 方 式 非常 简单 。 





HTML5 
实战 宝典 

添加 方式 一 : 
localStorage.name-"zhangsan"; 

添加 方式 二 : 
local torace Tager] | 

添加 方式 三 : 
localStorage.setItem("sex","man"); 


测试 添加 结果 (Chrome) 如 图 5-1 Pr: 


[x A] Elements Console Sources Network Timeline 


B Clear stor’ Key Value 
age Le 
Storage name zhangsan 


Sex man 
v == Local Sto 


Mira. 、 


— b 22 Seccion S*) SSS 





3. 如 何 获 取 数 据 
获取 方式 与 设置 方式 对 应 ， 也 有 三 种 方式 。 
获取 方式 一 : 








var vall=localStorage.name; 





获取 方式 二 : 


var val2=localStorage["age"]; 





获取 方式 三 : 


var val3-localStorage.getItem("sex"); 


4. 如 何 删 除数 据 
localStorage.removeIltem("name"); 


消除 挥 所 有 的 数据 


localStorage.clear(); 


需要 注意 的 问题 : 

(1) localStorage 存储 的 数据 只 能 是 字符 串 ， 即 使 在 存储 的 时 候 保存 的 是 其 他 类 型 ， 获 
取 到 的 还 是 一 个 字符 串 。 

(2) 假如 我 们 想 在 localStorage 中 存储 一 个 json 格式 的 数据 ， 不 经 过 处 理 下 接 存 储 肯定 
是 不 可 以 的 ， 我 们 可 以 使 用 json 格式 数据 的 转换 方法 JSON.stringify() 和 JSON.parse0， 可 以 


EM 





客户 端 存储 一 一 在 线 可 编辑 表格 实战 
在 Json 格式 和 学 符 串 格式 之 间 互 相 转 换 : 
var message={name: "zhangsan",age:1/,sex:"man"} 


localStorage.setlItem("message",JSON.stringify (message) ) 


var newmessage=JSON. parse (localStorage.getItem("message") ) 


(3) 安全 性 问题 。Web 存储 并 不 比 Cookies 安全 ， 所 以 不 要 在 客户 端 存储 敏感 信息 ， 例 
如 密码 或 信用 卡 信息 如 图 5-2 所 示 。 











Lr a Elements Console Sources Network Timeline 


Bi Clear stor* Key | Value 
message {"name":"zhangsan","age":17,"sex":"man"} 





Storage 





v == Local Sto 


EFI .. 


lk 5-2 
假设 在 您 的 网 站 上 ， 要 为 一 个 Web 表单 提供 离线 文 持 。 如 果 用 户 提交 了 表单 ， 并 且 在 
网 站 恢复 在 线 时 让 此 表单 与 服务 噩 同步 ， 那 岂 不 是 很 棱 。HTMLS 可 以 实现 此 目标 ， 在 5.4 
wH, HRF localStroage 的 保存 表单 信息 的 应 用 介绍 。 








5.3 利用 sessionStorage API 管理 数据 





sessionStorage 是 HTMLS Web 存储 的 男 一 种 方式 ， 用 于 存储 本 地 一 个 会 话 (session) 级 
别 的 数据 ， 通 过 sessionStorage 存储 的 数据 和 通过 localStorage 存储 的 数据 有 效 期 是 不 同 的 。 
一 旦 窗口 或 者 标签 页 被 永久 关闭 了 ， 那 么 所 有 通过 sessionStorage 存储 的 数据 也 吏 被 删除 了 。 
sessionStorage 和 localStorage 拥有 相同 的 API， 所 以 ， 在 上 一 节 中 介绍 的 属性 和 方法 ， 
在 这 一 他 也 可 以 使 用 。 
比如 设置 数据 如 网 5-3 TAN: 
sessionStorage.name="zhangsan"; 


Sessivonstorage lagel "l"; 


SesstonsuOrage.sceltem( sex" mam”); 


Lr d] Elements Console Sources Network Timeline 


A 








Storage Key | Value 
-— age |17 
v == Local Sto 
name zhangsan 
=s file:// Sex man 
v == Session S 
== file:// 
图 5-3 
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接 下 来 ， 通 过 一 个 例子 来 运用 一 下 sessionStorage: 


sereloc tsm ee 

«html lang="en"> 

«head» 

<meta charset-"UTF-8"» 
ELSE Doc umen db e ke> 

< er de 

// 页 面 加 载 完成 后 执行 

window.onload=function() { 

/ / FUERA span 

var span=document.querySelector ("div span"); 
// 定 义 一 个 初始 值 num 

var num=0; 

/ /如 果 在 session PA count 的 值 则 获取 这 个 值 并 目 加 


if(SsesesionStorage .gerl rem (“coune”)!—undetined) { 








var newnum=Number (sessionStorage.getItem("count")); 
span. innerHTML=++newnum; 
sessionStorage.setlItem("count",newnum); 
}else{ 

/ /如果 在 session 中 没有 count 值 则 初 设置 为 初始 值 
seeoolonSstorage ssem counti", num) 

} 

} 

< 

</head> 

<body> 

<div> “HU <span>0</span>ixmllipt A 0 </div> 
«Ul Doe 

«ote 


这 样 ， 在 页 面 中 就 能 实时 显示 当前 是 第 几 次 刷新 页 面 。 本 书 附录 有 关于 本 地 存储 API 的 
相关 介绍 。Web Storage 的 例子 ， 谈 者 可 以 自行 得 看 。 











5.4 在线 可 编辑 表格 实战 


本 节 将 介绍 如 何 利用 localStorage 制作 一 个 可 以 在 线 编辑 的 表格 ， 以 实现 添加 删除 和 修 





改 等 功能 。 主 要 通过 给 每 一 个 内 容 td 注册 单 击 事件 ， 在 单 击 的 时 候 生 成 一 个 input 标签 ， 用 
户 可 以 在 input 中 输入 数据 并 且 在 失去 焦点 后 获取 到 修改 后 的 值 并 人 存 入 本 地 存储 。 完 整地 实 
3 Y AE IR] ZU BE o 


seeloc tee 

«html lang="en"> 

«head» 

«meta charset="UTF-8"> 
“teller Document eb db 
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客户 端 存储 一 一 在 线 可 编辑 表格 实战 

<style> 

/ BCE ASS ENE ZA / 

table { 

width: T 200px; 

height: auto; 

border-collapse: collapse; 

border: lpx solid 7000; 

gg 

} 

/* 设 置 表 头 和 td 单元 格 的 样式 */ 

tele lay | 

border: sonet 

} 

/* 设 置 添 加 按钮 的 样式 */ 

nage { 

下 

height: 0p; 

CURSOR. DPOlnter; 

tert align Comers 

Tont size: Op; 

line-height: 30px; 

font weight: Dold: 

benders Lox solid 7000; 

border—top: 0; 

Mae Eee 

} 

</style> 

er 

window. onload=function () { 

//3R table WR 

var table-document.getElementsByTagName ("table") [0]; 

// WRATH Hii FU message 的 结果 为 空 则 声明 一 个 新 数组 

if (!localStorage.message) { 

var arr-[]; 

}else{ 

/ /如 果 不 为 空 则 将 结果 转化 为 ISON 格式 

var arr-JSON.parse(localStorage.message) 

| 

// 明 历 得 到 的 数组 ， 为 每 一 条 信息 创建 一 个 tr 

Eo (a TO a Tale) tel oslatectg) ia 

ol 

var tr-document.createElement ("tr") 

//fE tr PRCA VOUS ca Zu Vexk4ls SENT TE TBR 

tr.innerHTML="<td dust mame’ "are | 
attr='age'>"+arr[i].age+"</td><td curse rumes ac Rel 


class='del'>/HiR</td>"; 
73 | 
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// 将 tr MAFI] table 中 

table. appendChildl(try: 

j 

//23 table 添加 双击 事件 通过 事件 委派 的 方式 添加 给 每 一 个 tdq 
table.ondblclick=function(e) { 

var target=e.target; 

/ / PIURA ta 是 一 个 可 以 用 来 输入 操作 的 就 继续 进行 

if (target.nodeName=="TD"&&target.className!="del") { 
/ /3kRUBg ta BJ attr BY 
人 

// RAAB td I Se x 

var parent=target.parentNode; 

A RA tx 

var trs=document.getElementsByTagName ("tr"); 
二 | 

// 通 历 所 有 的 tr 判断 如 果 当 前 tr 是 我 们 正在 操作 的 tz 则 获取 现在 的 index fH 
in (ees [a | P ent) 

三 

break; 

} 

}; 

/ /获取 td 中 保存 的 旧 值 ， 如 果 这 个 值 是 空格 则 将 这 个 值 赋值 为 空 衬 符 串 
var Oldv—targer-innerk TMI; 

| 

oldv=""; 

} 

// 将 td 中 的 内 容 清 空 

target.innerHTML=""; 

// 创 建 一 个 输入 框 input 

var input-document.createElement ("input"); 

// 设 置 input HJ type 类 型 和 value fi, value 了 驶 赋 为 刚才 获取 到 的 值 
POU VID ON EON 











Lowe. value—olldy; 

// 将 input 插入 到 ta 中 
Eaecger.appendehr ld (impur ) 
//ik ta 自动 获得 焦点 
LOU 4 OCUS): 

//input 失去 焦点 的 时 候 ， 也 就 古 我 们 的 修改 已 经 完成 的 时 候 执 行 
lm onl is idee aor ()) d 

// 获 取得 到 的 新 值 

var newv=this.value; 

// 从 td 中 移 除 这 个 input 元 素 
target remove NIild(this); 

// 将 tq KEME AN KIRI T AT EL 
target.innerHTML=newv; 


/7 判断 如 果 新 值 和 旧 值 一 样 则 直接 返回 不 在 继续 执行 
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if (newv==oldv) { 

returns 

j 

// 将 数组 中 对 应 的 元 素 的 对 应 属性 赋值 为 新 值 

arr[index] [attr]=newv; 

/ /将 数据 存 入 localStorage 中 

localStorage.message=JSON.stringify (arr) ; 

j 

} 

} 

/ SII A e Is 

// 获 取 添 加 投 钮 

var add-document.getElementsByClassName ("add") [0]; 

// 添 加 按钮 被 单 击 的 时 候 触发 的 事件 

cden ikek: NNE] 

/ /创建 一 个 新 的 tr 

var tr-document.createElement ("tr"); 

// 在 tr 中 放 管 四 个 ca 分 别 代 表 姓 名 年 龄 TE 删除 

tr.innerHTML="<td attr='name'>énbsp;</td><td attr='age'>&nbsp;</td><td 
了 

// 将 tr 插入 到 table 中 

taple:appendChild(tr) 

/ /创建 一 个 空 对 象 ， 包 含 姓名 年 龄 性 别 这 三 个 值 

var ob- name Uae Oe m 

/ /将 这 个 对 象 添加 到 arr 中 

air CU SNOL, 

// 将 数据 存 入 localStorage 中 

localStorage.message=JSON.stringify (arr) ; 

} 

// 给 table 添加 早 击 事件 通过 事件 委派 的 方式 给 每 一 个 del 添加 事件 


table.onclick=function(e) { 











var target=e.target; 

// 判 新 如 采 目 标 事 件 源 的 类 名 为 del 则 继续 进行 

if (target.className=="del") { 

// 获 取 当 前 页 面 中 所有 的 类 名 为 del 的 元 条 

var dels=document.getElementsByClassName ("del"); 


/ / 38 ITA del 元 素 

Dons (eee ee MEME mea en Lc 

// 如 末 当 前 过 历 的 对 象 是 我 们 的 目标 事件 源 ， 则 获取 index fH 
if (target==dels[i]) { 


var index-1i; 








break; 

} 

by 

/ / FRSA EB SPUR SO ea 


var parent=target.parentNode; 





| 
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/ / table TE HUC SEC ER (Er) 
table.removeChild(parent); 
// 从 arr 中 将 当前 tr OMA Se E 
arreSolIioe(Index db 
// 更 新 localStroage 中 的 内 容 
localStorage.message-JSON.stringify (arr); 
} 
j 
} 
pecu 
</head> 
<body 
<!-- HTML 部 分 一 个 结构 简单 清晰 的 表格 --> 
<table> 
Sp 
«nb 
«ERAS ER 
«th» TE3J«/th» 
<th> 操 作 </th> 
Ee 
</table> 
sdis classo Tadd" 
n 
</ Gay 
</ body 
<< lorem zs 


效果 截图 如 图 5-4 所 示 。 











我 们 给 这 个 信息 表格 添加 了 两 组 数据 ， 在 页 面 刷 新 之 后 ， 这 两 组 数据 依旧 存在 。 单 击 
“删除 ”， 可 以 删除 一 行 的 数据 。 
效果 截图 如 图 5-5 所 示 。 








a : s 
图 5-5 
对 数据 进行 修改 之 后 ， 刷 新 页 面 也 可 以 剑 存 修改 后 的 结 林 。 
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6.1 WebSocket 概述 











众所周知 ，Web 应 用 的 交互 过 程 通常 是 客户 问 通 过 浏览 占 发 出 的 一 个 请 求 ， 服 务 器 病 接 
收 请 求 后 进行 处 理 并 返回 结果 给 客户 珊 ， 客 户 端 浏览 器 将 信息 呈现 。 这 种 机 制 对 于 信息 变化 
不 是 特别 频繁 的 应 用 尚 可 ， 但 对 于 实时 要 求 蜗 、 海 量 并 发 的 应 用 来 说 束 显 得 捉襟见肘 。 当 前 
移动 互联 网 攻 动 友 展 ， 蜗 并 发 与 用 户 实时 响应 是 Web 应 用 经 党 面临 的 问题 ， 比 如 金融 证 券 
的 实时 信息 ，Web 导航 应 用 中 的 地 理 位 置 获 取 ， 社 交 网 络 的 实时 消息 推送 等 。 

传统 的 请 求 -响应 模式 的 Web 开发 在 处 理 此 类 业务 场景 时 ， 通 常 采 用 实时 通信 方案 ， 常 
WLAN ze: 

C1) wW, Jg PET HERR, Wi 2 ig TL — xe B EST TRI TRI Bl ELLE TE S] 23 X 18] IRS 
fit SIS VR, OR TRAE S Cm d a i HIA d A. Pe I HIE. tig EA Ted ERR 
[A] IRS ai in AIR TEI, IRA AE vie HJ a H] RA Et, TH ORI SC Va Ok, YR Bea 
ju. BRK PF 

(2) SEF Flash, Adobe Flash 通过 目 己 的 Socket 完成 数据 交换 ， 和 再 利用 Flash 又 露出 相 
应 的 接口 为 JavaScript WH, Mats SuSE mp eT AA. UE See ee va) Be ia, LALA Flash 安 
闭 率 高 ， 应 用 场景 比较 广泛 ， 但 在 移动 互联 网 终端 上 Flash 的 文 持 并 不 好 。IOS 系统 上 没有 
Flash 的 存在 ， 在 Android 上 虽然 有 Flash 的 文 持 ， 但 实际 的 使 用 效果 差强人意 ， 且 对 移动 设 
备 的 便 件 配置 要 求 较 局 。2012 年 Adobe 官方 宣布 不 再 文 持 Android 4.1 AZ, ‘Hi Flash 1E 
式 退 出 移动 终 闹 。 

传统 Web 模式 在 处 理 高 并 发 及 实时 性 需求 的 时 候 ， 会 过 到 难以 通 越 的 瓶 贷 ， 我 们 需要 
一 种 高 效 节 能 的 双 回 通信 机 制 来 保证 数据 的 实时 传输 。 在 此 背景 下 ， 基 于 HTMLS 规范 的 ， 
有 Web TCP 之 称 的 WebSocket 应 运 而 生 。 

早期 HIMLS 并 没有 形成 业界 统一 的 规范 ， 各 个 浏览 费 和 应 用 服务 器 厂商 有 大 不 同 的 实 
现 方式 ， 如 IBM 的 MQTT，Comet 开源 框架 等 。 百 到 2014 年 ，HIMLS IESU RISE A 
实际 标准 规范 ， 各 个 应 用 服务 器 及 浏览 器 厂商 逐步 开始 统一 ， 在 JavaEE 7 中 也 实现 了 
WebSocket 协议 ， 从 而 无 论 是 客户 端 还 是 服务 端的 WebSocket 都 已 完备 ， 读 者 可 以 查阅 
HTMLS 规范 ， 熟 悉 新 的 HTML 协议 规范 及 WebSocket 支持 。 



























































6.2 WebSocket 的 原理 及 运行 机 制 





WebSocket 是 HTMLS 一 种 狐 协 议 。 它 实现 了 浏览 器 与 服务 器 全 双 工 通信 ， 能 更 好 地 市 
省 服务 器 资源 和 带宽 并 达到 实时 通信 ， 它 建立 在 TCP 之 上 ， 同 HTTP 一 样 通 过 TCP 来 传输 
数据 ， 但 是 它 和 HTTP 最 大 的 不 同 有 以 下 几 点 : 

WebSocket 是 一 种 双 问 通信 协议 ， 在 建立 连接 后 ，WebSocket 服务 器 和 Browser/Client 
Agent 都 能 主动 的 同 对 方 发 送 或 接收 数据 ， 束 像 Socket 一 样 。 

WebSocket 需要 头 似 TCP 的 客户 问 和 服务 器 问 通 过 握手 连接 ， 连 接 成 功 后 才能 相互 通信 。 

相对 于 传统 的 HTTP. 每 次 请 求 -应 答 痢 需要 客户 病 与 服务 闹 建 并 连接 的 模式 ，WebSocket 
采用 类 似 Socket 的 TCP 长 连接 的 通信 和 模式， 一 旦 WebSocket 连接 建立 后 ， 后 续 数 据 都 以 帧 


D 
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序列 的 形式 传输 。 在 客户 端 断 开 WebSocket 连接 或 Server vine Ren, Avia ZEAE PA m A RS tg 
重新 发 起 连接 请 求 。 在 海量 并 发 或 客户 冰 与 服务 器 交互 负载 流量 大 的 情况 下 ， 这 样 能 极 大 地 
廊 省 网 络 市 冤 资 源 的 消耗 ， 有 明显 的 性 能 优势 ， 且 客户 端 发 送 和 接收 消 已 是 在 同一 个 持久 连 
接 上 发 起 ， 实 时 性 优势 明显 。 

再 通过 客户 问 和 服务 问 交 互 的 报 文 看 一 下 WebSocket 通信 与 传统 HTTP 的 不 同 : 

E Z im, new WebSocket 实例 化 一 个 新 的 WebSocket 客户 端 对 象 ， 连 接 类 似 
ws://yourdomain:port/path 的 服务 端 WebSocket URL, WebSocket 客户 并 对 象 会 日 动 解析 并 识 
别 为 WebSocket 请 求 ， 从 而 连接 服务 端 病 口 ， 执 行 双方 握手 过 程 ， 客 户 问 发 送 的 数据 格 
ARW: 




















GET /Webfin/WebSocket/ HTTP/1.1Host: localhostUpgrade: WebSocketConnection: 
UpgradeSec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg--Origin: http://localhost: 8080Sec- 
WebSocket-Version: 13 


H UEF, AP ig AY WebSocket 连接 报 文 类 似 传 统 HTTP tk x, “Upgrade: 
WebSocket” 参 数值 表明 这 是 WebSocket 类 型 请 求 ,“Sec-WebSocket-Key” 是 WebSocket 客 
FADA) 7" base64 编码 的 密 文 ， 要 求 服 务 闹 必 须 返 回 一 个 对 应 加 密 的 “Sec-WebSocket- 
Accept" NW, EUZ Pme “Error during WebSocket handshake” 错 误 ， 并 关闭 连接 。 

服务 端 收 到 报 文 后 返回 的 数据 格式 类 似 : 

HTTP/1.1 101 Switching ProtocolsUpgrade: WebSocketConnection: UpgradeSec- 
WebSocket-Accept: K7DJLGLOoIWIG/MOpvWFB3y3FE8= 


“Sec-WebSocket-Accept” [T EL ze Ik 5 imi AH] 3 e in UTE 263 VT A CHOROS [REC JP ig 
HJ, “HTTP/1.1 101 Switching Protocolgs” 表 示 服 务 关 接受 WebSocket 协议 的 客户 问 连 接 ， 经 
过 这 样 的 请 求 -响应 处 理 后 ， 客 户 端 服 务 端的 WebSocket 连接 握手 成 功 ， 后 续 就 可 以 进行 
TCP 通信 了 。 读 者 可 以 查阅 WebSocket 协议 来 了 解 WebSocket 客户 端 和 服务 端 更 详细 的 交互 
数据 格式 。 
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了 解 了 其 运作 原理 后 ， 就 可 以 使 用 socket.io 这 个 js 库 来 制作 在 线 五 子 棋 ， 关 于 js 库 的 
更 多 内 容 ， 大 家 可 以 访问 官网 http://socket.io 去 了 解 更 多 的 信息 。 

前 人 台 技 术 JavaScript + socket.io.js; 

后 台 技 术 Node.js + Express + socket.io 模块 。 

首先 是 HTML 代码 : 


<!doctype HTML><HTML> 
<head> 

<meta charserk— Uln—o 4) = 
<title>Five-in-Row</title> 





<meta Name—"“vIEwoork” content="widih=device width, initial seale=l" > 


<link rel="stylesheet" href="/stylesheets/index.CSS"/> 
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</head> 
<body> 
«!-- js 脚本 动态 生成 内 容 退 加 到 此 处 --» 


“Guy sclass=—" sense" id=" sence! im 





RE 
scr /va er Ee Lx a a 
</body></HTML> 








CSS 文件 ， 处 理 一 些 简 单 的 样式 


| e _ 


body { 
background: #4b4843; 
font-family: "微软 雅 黑 "; 
Color: OGE; 

}.sense{ 
widia: 6 0019527 
RE C00 x 
margine o Up on 
Dom denm ce none; 
border-bottom:none; 
OOihi relative: 
Dox Schadow: Oes lOp: sp e 
background: #8d6d45; 
borden 7p. So mide black, 

-sense duoc 

float:left, 
Margin righe Tpx; 
margin bDOCCoOm: ix 
berder—radius: ou > 
Eee ene relative; 
Zz index: 00041; 

I. Sense COW, -Sense coli 
backoround:+4¢5 920, 
POstETON: absolute; 

} .sense .rowt 
widia: 100 ss 
height:1px; 
eine 0} 

Smse coU 
widia: io， 
height:100; 

EOP: O; 

}. white { 

Background: e ET pd dd 

全 acR| 
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JavaScript 实现 思路 主要 为 男 出 场景 、 洛 子 绘画 、 输 局 判断 和 监听 网 络 。 





window.onload = fumetion () { 
var socket = io(), 
sence = document.getElementById('sence'), 
/ iK 


ROW = 10,NUM = ROW*ROW, 


/ / Vs Bi PZ 


senceWidth = sence.offsetWidth, 


// 每 里 棋子 宽度 
blockWidth =Math.floor( (senceWidth-ROW)/ROW ) +'px', 


// FAP Fran RUA] De T 


canDrop = Crue, 


/ FAP SRG A EVER 


color='white', 











/ /两 个 字典 ,用 来 存放 白 棋 和 黑子 的 已 沙子 位 置 ; 以 坐标 为 键 , 值 为 true; 
whiteBlocks = {},blackBlocks = {}; 


// 创 建 场景 
(eae sora C Ub d 
var el, 
/ / TERR E mpi ee 
rowline, 
/ [TERRAE E m BE 
colline; 
duo M SI URS EP ON E 4 


// 按 照 计算 好 的 间隔 放置 横 线 

rowlane = document .oreateEblement ("div"); 

COW eMeeSerAbEriblnei Glass row); 

rowline.style.top= (senceWidth/ROW) /2 + (senceWidth/ROW) *i + 'px'; 


sence.APPendChild(rowline); 


/ THREE TCU BI Fn] BC UR 2x 

colline -odocumembecereateElemen,?('grw ys 

Colline cotate DUE els 7 (col); 
colline.style.left=(senceWidth/ROW) /2 + (senceWidth/ROW) *i + 'px'; 
sence. APPendChild(colline),; 


Lore Er = 0 EE EON ECL I 


el = document.createElement('div'); 
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el.style.width lio cwn cbr 

el style nenght — bilockWwadeh 

el setAttributre( “class”, block"); 

el aise Mee Woes 0 MM E 
sence.APPendChild(el); 


var a POSTE rOn Une SEO (ake): | 

a ea Nm a er (el soda (onem I EET ee 
^; 
eso os n on c mom a 

a(S EDU SIs E ay anew A Oe 


E 





/ /判断 沙子 后 该 色 棋 是 否 连 5; 
var isHasWinner= function(id,dic) { 
Var x = “dz Position(id) .<- 


var WY =— ILC Pos aie ae f aL) SAP 








// 用 来 记录 横 , 紧 , 左 斜 , 右 斜 方 辣 的 连续 棋子 数量 


var rowCount=1,colCount = 1, leftSkewLineCount=1, rightSkewLineCount= 1; 


//tx ty (PAV, 2B, 6%, EE, FB, eb, AP, AP, Bee, 
// 每 次 数 完 某 个 方 同 的 连续 棋子 后 ,游标 会 回 到 原点 . 


var Cx; ty? 





/ T, DA FAET 5 ELL ETRA RRE, AA 5 Bi ay 


E(t} 

Ea quc (nel os om Ne (ax, cil) Ome > ms 

if( rowCount == ) return true; 

a el mE et a | 

IE 

if( colCount == ) return true; 

起 
ee 

慧 基于 三 页 有 Te 
lume embed EE Mu 

if( leftSkewLineCount == ) return true; 

M rdg ccce oc 4 eerste ena elise dte sve do) RT E xoa dones ded 


hineCountct;tx--;tyd4t.) 
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ip c ey mE TR obi os on Le seri Ew TI e oet atte S e end 
me ount fe rx- +. 6 y= =e 


if( "rightSkewinneCount == ) return true; 


return false; 


m 





// 处 理 对 手 发 送 过 来 的 信息 
socket on oso one nre Tate ce 
CanDrop = true; 
var el = document.getElementById(data.id); 
el.setAttribute('has-one','true'); 
aee (data. Color == "white yl 
Color = ucc 
el.setAttribute('class','block white'!); 


whiteBlocks[data.id] = true; 


if (isHasWinner (data.id,whiteBlocks) ) { 
alert ( ' ELEC," ) 
MM T 


) 

telse{ 
el.setAttribute('class','block black'); 
blackBlocks[data.id] -» true; 
pr c 


alert( PEEL LAW ' 


SPEM 


TJ s 


/ / APEC EA PR 


Sence onclick = Fur One 
var el = e.target; 
aee elem er || <l.hasAttribute ("has orel) IN el == this ) | 
returns 


el.setAttribute('has-one','true'); 


canDrop - false; 
var id = el.getAttribute('id'); 
if( color == 'whate' )( 


el.setAttribute('class','block white'); 
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er 


whiteBlocks[id] = true; 
Se ee 
if(isHasWinner (1d,whiteBlocks) ) { 

alert (' Atti") 

—— 


} 


LE (color == "black" 
el -seuAttribute(’class’, ‘block black'); 
blackBlocks lid] = true; 


Socker emiti Trop one) aaa olor blacki ny; 
a blackBlocks)){ 
alert ('IBgg' 


i ok a 


) 
Je 
Wr 


AR d SEHR: 


var Express ~ requlire('express');/var app = exoress (); var http = 
require le ) cT P (app) > var 10 ~ —reduame socker-u o ET ID 

io.on('connection', function (socket) { 

Socker om drop nome rune ondata) 

sacokete Broadeast emlit('drop one' data); 

j); 
j); 
apo Use (express. Stable Dum 
app.get('/', function(req, res) { 

Ted eend lel dirname ne HINL) 


OG 


Mego, LaSiseia( 000 Ti unction) 


Console log listening on ~: 20007); 


jg 


读者 可 以 跟 看 注释 去 理 清楚 思路 ， 再 去 完整 地 实现 整个 代码 。 
全 此 ， 我 们 利用 WebSocket 技术 完成 了 一 个 有 趣 的 在 线 五 子 棋 游戏 。 
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过 去 的 很 多 年 里 ， 我 们 开发 游戏 禹 度 互动 的 应 用 时 大 多 采用 Adobe 公司 的 Flash. 
如 今 ， 移 动 应 用 呈现 出 爆炸 式 的 发 展 的 态势 ， 但 是 Adobe 公司 的 Flash 却 没 有 做 出 任何 








PIDE XXE HERE. FÆ HTMLS 的 Canvas API 带 着 撼动 Flash 霸主 地 位 的 决心 强势 
登场 了 ，HTMLS Canvas API 已 经 是 在 PC、 平 板 电脑 和 手机 上 开发 路 平台 动 男 和 游戏 的 
标准 解决 方案 。 


7.1.1 Canvas 浏览 器 支持 


Firefox, Safari, Chrome 和 Opera 的 最 狐 版 本 以 及 IE9 以 上 版 本 都 支持 Canvas, fHaer f 
的 是 IE8 及 以 下 版 本 不 文 持 。 

值得 庆幸 的 是 针对 不 支持 HTMLS 的 IE6、IE7、IE8， 可 以 解决 的 方法 是 使 用 包含 一 个 
完整 的 基于 Canvas 的 JavaScript 库 ， 这 个 库 由 Google 提供 ， 称 为 ExplorerCanvas 一 或 简称 
ExCanvas。 下 载 并 将 其 作为 一 个 外 部 文件 引用 ， 如 下 所 示 : 


SI 
ee ST = anvan cT 
<l [eme] 


ExCanvas 兼容 函数 库 下 载 地 址 : 








https://github.com/arv/ExplorerCanvas 


7.1.2 +F Canvas API 神秘 面纱 


Canvas 在 HTMLS 中 是 一 个 非常 强大 的 元 素 ， 接 下 来 ， 我 们 开始 去 学 习 它 。 我 们 可 使 用 
JavaScript 脚本 来 绘制 图 形 ， 例 如 : 画图 ， 合 成 照片 ， 创 建 动 画 其 至 实时 视频 处 理 与 泻 染 。 
而 通过 Canvas 可 以 绘制 路 人 符 、 和 矩形 、 圆 形 、 文 学 以 及 添加 图 像 。 要 使 用 Canvas 来 绘制 图 形 
必须 在 页 面 中 添加 Canvas 的 标签 。 

Canvas 元 素 必 性: 

Canvas 通过 标签 上 的 属性 定义 其 宽度 和 高 度 ， 属 性 具体 方法 如 下 : 

Canvas 是 一 对 标签 ， 我 们 在 使 用 的 时 候 必须 要 使 用 开始 标签 和 结束 标签: 


<canvas></canyas> 


width 属性 画布 的 宽度 。 这 个 属性 可 以 指定 为 整数 像素 值 或 者 是 窒 口 宽度 的 百分比 。 默 
认 值 是 300px。 

height 属性 了 画布 的 高 度 。 这 个 属性 可 以 指定 为 整数 像素 值 或 者 是 窗口 高 度 的 百分比 。 默 
认 值 是 150px. 

修改 Canvas 元 系 大 小 : 
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C1) 通过 标签 方式 修改 的 代码 如 下 : 


<canvas width="500" height="500" id="canv"></canvas> 


(2) 通过 样式 方式 修改 的 代码 如 下 : 


#canv { 
widih: S10! TS ee 
hergnt: 00px, 
j 


(CO 注意 : 用 这 两 种 方式 设置 宽 高 ， 是 存在 差异 的 ， 而 且 通过 行内 属性 的 方式 设置 宽 
高 ， 不 能 加 单位 px. Æ Canvas 标签 中 通过 属性 width. height 修改 宽 高 ， 修 改 的 是 Canvas 
元 素 的 自身 大 小 。 而 在 样式 表 中 修改 Canvas 标签 宽 高 属性 则 是 对 它 的 内 容 进行 缩放 ,如 果 比 
例 与 Canvas 本 丢 比 例 不 一 致 会 导致 图 像 的 扭曲 。 如 果 出 现 扭曲 可 以 通过 调整 Canvas HA, 
性 width、height 来 确保 比例 一 致 。 

使 用 Canvas Mifi 

请 使 用 一 个 代码 编辑 器 ， 新 建 一 个 HIMLS 的 基本 文档 。 我 们 需要 在 <body> 标 签 中 放置 
一 个 Canvas 元 素 。 为 了 可 以 清晰 地 看 到 Canvas 元 素 的 尺寸 ， 它 的 默认 尺寸 是 width 为 
300px, height 为 150px， 我 们 修改 body TRASA, Canvas 默认 透明 ， 我 们 给 它 加 一 个 
HERT. 

ARID E: HTML FND Canvas 标签 


<l DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

«EIE TS C eua eus ade | s, cable Jos 

<style> 

body { 

background :4444- 

j 

canvas { 

background: riii: 

j 

«/style» 

</head> 

<body> 

<!--7E Canvas 标签 中 我 们 写 入 提示 信息 ， 如 果 当 前 用 户 浏览 器 不 文 持 会 显示 标签 中 的 信息 。--> 
<canvas> 请 升级 您 的 浏览 髓 来 文 持 Canvas!</canvas> 
</body> 

<< evera = 


QR pas x RES BROAN 7-1 所 示 。 
QR DY Daas AN cK, MARUR] 7-2 Hp. 
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图 7-1 


7.1.3 ”使 用 Canvas API 绘制 图 像 


在 HTML 中 定义 好 Canvas 标签 后 ， 需 要 通过 JavaScript 进行 图 形 的 绘制 。 
Canvas 只 是 一 个 HTMLS 画布 元 素 ， 它 本 号 只 是 一 个 标签 
行 操作 : 








并 不 具备 绘制 功能 
(1) 语法 





RARE, TCR RR REAR AEE, Ba JavaScript 给 我 们 提供 的 API 来 对 画布 进 
来 进行 图 像 绘 制 。 


TA 
Eg e 
JON 


Canvas.getContext (contextID) 
(2) 参数 


。 如 来 要 
getContext(0 方 读 返 回 一 个 用 于 在 男 布 上 绘图 的 环境 对 象 ， 通 过 使 用 该 对 象 的 属性 、 方 法 








参数 contextID 指定 了 您 想 要 在 画布 上 绘制 的 类 型 


(3) 返回 值 


2d 的 字母 d 必须 要 小 写 ) ， 指 定 绘制 闫 型 为 二 维 绘图 ， 并 且 通 过 这 个 方法 返回 一 个 环境 
对 象 ， 该 对 象 导 出 一 个 二 维 绘 狗 API. 








目前 我 们 可 以 十 与 的 值 为 "2d"〈 注 
代码 清单 : 


一 个 Canvas Rendering Context2D 对 象 ， 我 们 通过 这 个 对 象 来 绘制 图 形 
通过 脚本 获取 绘图 环境 。 
< em” 


window.onload=function () { 


//1.3RF Canvas 元 素 


var can=document.getElementByld("canv") ; 
//2 .获取 绘图 环境 
var "Colby can. met onse» cs 
| 
rio 


效果 如 图 7-3 所 示 。 
Canvas KIRA: 








画布 左上 角 为 坐标 原点 (0,0)， 横 向 为 x 轴 ， 纵 向 为 y 轴 。 效 果 如 图 7-3 所 示 。 


HTML5 画布 一 一 在 线 绘图 板 





图 7-3 


Canvas 元 素 绘 制图 像 的 时 候 有 两 种 方法 ， 分 别 是 : 


TEL 
Context. stroke ()/ Zl E 


style: 在 进行 图 形 绘制 前 ， 要 通过 以 下 几 个 属性 设置 好 绘图 的 样式 ， 分 别 可 以 通过 三 种 





A DORM AACE . 














rgb 方式 : 
context.fillStyle - 'rgb(255,0,0)';//Wt HA 
context.strokeStyle = 'rgb(255,0,0)';//ixBfzm|EWtS 
十 六 进 制 方式 : 
context.fillStyle = '#FF0000';// 设 置 绘制 颜色 
context.strokeStyle = '#FF0000';// 设 置 绘制 颜色 
单词 方式 : 
Conter nner 
context.strokeStyle = 'red';//KBEA nme 
颜色 的 表示 方式 : 














直接 用 颜色 名 称 :"red""green""blue" 

十 六 进 制 颜色 值 : "#EEEEFF" 

rgb(1-255,1-255,1-255) 

rgba(1-255,1-255,1-255,1% HA JE) 

ZA HiT FR KEE 

定义 和 用 法 

fillRect() 方法 绘制 “已 盾 色 ”的 窍 形 。 默 认 的 填充 颜色 是 黑色 。 
ort 

使 用 fillstyle 属性 来 设置 用 于 填充 绘图 的 颜色 、 渐 变 或 模式 ( 后续 
JavaScript 语法 : 





> 


节 会 介绍 渐变 填充 ). 


者 


HTML5 
EE kes 


Context manne cuo e y, width,  nNeignit), 


参数 值 如 表 7-1 所 示 。 


dA 7-1 

参数 Ho 

x 矩形 左上 角 的 x 坐标 

y FIBA EAA y MER 
width EERTE, LMR ZR tt 
height AIBA es, MRR 

代码 请 单 : Ze TELAT e 
XXe ong 


window.onload=function () { 

J AL BoE Cavers Jin 

var can=document.getElementByld("canv") ; 
//2 .获取 绘图 环境 

var cob can. E nhe c 

//3. 设 定 样式 TAFE, blue 

je 的 加 出 te 

//A.3F383875. 24 left,top,width,height 
Cobas Tedoeteseas (a0, 50, 200 2400). 12 

j 

</ Semon 


效果 如 图 7-4 所 示 。 





图 7-4 


绘制 窍 形 框 : 定义 和 用 法 。 
strokeRect(0 方 法 绘制 一 个 摘 边 效果 的 窍 形 。 笔 触 的 默认 两 色 是 站 色 。 


(Dim 








请 使 用 strokeStyle 属性 来 设置 笔触 的 颜色 、 渐 变 或 模式 (后 续 章 节 会 介绍 渐变 


EM 


填充 )。 


HTMLS5 画布 一 一 在 线 绘图 板 
JavaScript 语法 为 : 


Context. etrokeReclt (x Vy, width, height; 


参数 值 如 表 7-2 所 示 。 


表 7-2 

2 X Ho x 

x 矩形 左上 角 的 x 坐标 

y 矩形 左上 角 的 y 坐标 
width 矩形 的 宽度 ， 以 像素 计 
height 和 矩形 的 高 度 ， 以 像素 计 

代码 清单 : 绘制 矩形 框 。 
<SCript> 


window.onload Tune on 

JJ Lo eR Cet EU ples 

var can=document.getElementByld("canv") ; 
/ /2 .获取 绘图 环境 

var cob- can. Jet Context (2d); 

//3. 设 定 样式 填充 颜色 blue 线 粗 细 5 

CoBbJ ~Strokesry le—"'bine > 

eobJ l inenidth=5,; 

E E BRM left,top,width, height 
Coby. SErOKeR CCE (50750, 200,200). 

j 

cmi 


效果 如 图 7-5 所 示 。 





图 7-5 


绘制 路 径 : 
beginPathO 开 始 一 条 路 径 ， 或 重 置 当 前 的 路 径 。 
moveTo(x, y)W EE ^x y). 





| 


HIML5 
| ss ”实战 宝 上 由 
lineTo(): 添加 一 个 新 点 ， 然 后 创建 从 该 点 a 到 男 布 中 最 后 指定 点 的 路 人 符 〈 该 方法 只 设 定 
位 置 并 不 会 绘制 线条 )。 
closePath(): 创建 从 当前 点 到 开始 点 的 路 径 。 
beginPath()-j closePath() 结合 使 用 ， 主 要 作用 是 避免 绘制 之 间 的 相互 影响 。 
代码 清单 : 绘制 第 形 框 。 


Sie veal ou = 














window.onload=function() { 

/ /1.3kRKX Canvas 7638 

var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 

var cobj=can.getContext ("2d"); 

//3 .绘制 线条 

cobj .peginPath () ; // 开 始 绘制 路 径 

cob} .moveTo (50,50) /i A (50,50) 
cobj .lineTo (100,100) ;//22 iil BAA PR (100,100) 的 直线 
cobj.closePath ();//AG2z mille 
cobj.lineWidth-5;//ix BY. 
cobj.strokeStyle-2"blue";//ix HEC 
cobj.stroke ();// 绘 制 当前 路 径 厦 色 





//4 .绘制 填充 三 角形 

cobj .beginPath () ; // 开 始 绘制 路 径 

cob} .moveTo (50,120) ;//MEH Pit At (50,120) 
cobj .LineTo (90,160) ;// 绘 制 到 坐标 (90,160) 的 直线 
cobj .lineTo (260,120) ;// 绘 制 到 坐标 (260, 120) 的 直线 
cobj.closePath ();// 闭 合 绘制 路 径 

oD aa e a ee 

cob ino An 





j 
ciem 


效果 如 图 7-6 所 示 。 





图 7-6 


EM 


HTML5 画布 一 一 在 线 绘图 板 





绘制 圆 形 或 者 椭圆 : 

arc() 方 法 创建 弧 / 曲 线 〈 用 于 创建 圆 或 部 分 圆 )。 

(CO 提示 

如 需 通 过 arc) 来 创建 圆 ， 请 把 起 始 角 设 置 为 0， 结 束 角 设 置 为 2*Math.PI， 如 图 7-7 





Hu arc(100,75,50,0*Math. PI,1.5*Math. PI) 
Rau arc(100,75,50,0,1.5*Math. PI) 
ce fA: arc(100,75,50, 0*Math. PI,1.5*Math. PI) 


JavaScript 语法 : 
Gontext are(x yy eSsAngle eaAngle, counterclockwise); 


参数 值 如 表 7-3 所 示 。 


表 7-3 
2 X Ho x 
x 圆 的 中 心 的 x 坐标 
y 圆 的 中 心 的 y 坐标 
r 圆 的 半径 
sAngle 起 始 角 ， 以 弧度 计 。〔 弧 的 圆 形 的 三 点 钟 位 置 是 0 度 ) 
eAngle 结束 角 ， 以 弧度 计 
counterclockwise 可 选 。 规 定 应 该 逆 时 针 还 是 顺 时 针 绘 图 。false = 顺 时 针 ，true = Wet 
代码 清单 : 绘制 圆 形 框 。 
Sis oor 


window.onload- function () 4 

/ et Canvas ss 

var can=document.getElementByld("canv") ; 

//2. 获 取 绘 图 环境 

var Cobj—Can.geeConzexe ("2d"); 

//3 .绘制 圆 形 

cobj.beginPath () Hm 

/ /绘制 以 (60, 60) 为 圆心 , 50 为 半径 长 度 , 从 o 度 到 360 RE (PI 是 180 度 ) ,最 后 一 个 参数 代表 


INGLES Et Tie 
93 | 


HIML5 
| ewe 
Coles) Serco (40, ae O00 0 ME SO, texas) 
cobj.lineWidth 0 ARE 
Co Re le a 
cobj .stroke();// 绘 制 空 心 的 ， 当 然 如 果 使 用 £111 那 就 是 填 序 了 


j 
siue 


效果 如 图 7-8 所 示 。 





图 7-8 


绘制 弧 线 : 

arcTo() 方 法 在 画布 上 创建 介 于 两 个 切线 之 则 的 弧 / 曲 线 。 
四 提示 

请 使 用 stroke) Z KES ALA) 58 7) 8 9A 

JavaScript 语法 : 








Contex ll eer I Nl ees ie) 


参数 值 如 表 7-4 所 示 。 


表 7-4 

2 数 HER 
xl 弧 的 起 点 的 x 坐标 
yl 弧 的 起 点 的 y 坐标 
x2 弧 的 终点 的 x 坐标 
y2 弧 的 终点 的 y 坐标 
T 弧 的 半径 

[XE ER. £A. 
eoe 


window.onload=function () { 


//1.3kHX Canvas Juz 


| 4 


HTML5 画布 一 一 在 线 绘图 板 
var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 
var cobj=can.getContext ("2d"); 
//3. 绘 制 弧 线 
cobj .peginPath () ;// 开 始 绘 制 路 径 
cobj.moveTo(100,200);// 0 L4 
cob. r eo 00, 100,200, 00955 Ones E os 
cobj.lineWidth = 2.0;//Ain wile 
EOD a a a 
cobj.stroke () 7; // 绘 制 衬 心 的 ， 当 然 如 条 使 用 £111 那 就 是 填 序 了 。 


< 


效果 如 图 7-9 所 示 。 





图 7-9 
绘制 二 次 贝 赛 尔 曲线 : 
quadraticCurveTo()77 iA: 通过 使 用 表示 二 次 贝 压 尔 曲 线 的 指定 控制 点 ， 回 当前 路 径 添 加 
ee ee 
| 


QEF 

二 次 贝 塞 尔 曲线 需要 两 个 点 。 第 一 个 点 是 用 于 二 次 贝 塞 尔 计算 中 的 控制 点 ， 第 二 个 点 是 
曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 那 么 请 使 
用 beginPathO0 和 moveTo0 方 法 来 定义 开始 点 ， 效 果 如 图 7-10 所 示 。 


开始 点 (20, 20) 结束 点 (200, 20) 








控制 点 (20，100) 
图 7-10 
开始 点 : moveTo(20, 20) 
结束 点 : quadraticCurveTo(20, 100, 200, 20); 
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HTML5 


E 


JavaScript 语法 : 


SE S E iesur eolec eco 二 


参数 值 如 表 7-5 所 示 。 


a 1-5 
cpx USE AR PEG AY x 坐标 
cpy DUZER ARPES y 坐标 
X 结束 点 的 xX 坐标 
y 结束 点 的 y 坐标 


代码 清单 :绘制 二 次 贝 赛 尔 曲 线 。 


Or > 


window.onload=function () { 


/ 13 


Canvas jes 
can-document.getElementById ("canv"); 
.获取 绘图 环境 

CODI- can: Jer Contei du 

ZRMI 

.beginPath () ;// 开 始 绘制 路 径 
.moveTo(30,200) ;// 创建 开始 点 

{elec ise eae Cui le (dE 79) - LOU, 200, .00 
.lineWidth = 2.0;// 线 的 宽度 

Se cokes he = eH 
.stroke () ; / /绘制 军心 的 ， 当 然 如 条 使 用 fill PRERA T -o 


</ Se 


效果 如 图 7-11 所 示 。 


| 9 





儿 7-11 


HTMLS5 画布 一 一 在 线 绘图 板 

ZA il] — Xx Ul 2E Hl £k: 

定义 和 用 法 : bezierCurveTo() 77 3; fii H] RREA M 3E AK HZ HR ETE. [a] SHER AS 
深 加 一 个 后 。 

QR 

三 次 贝 塞 尔 曲线 需要 三 个 点 。 前 两 个 点 是 用 于 三 次 贝 塞 尔 计算 中 的 控制 点 ， 第 三 个 点 是 
曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 那 么 请 使 用 
beginPathO0 和 moveTo() 方法 来 定义 开始 点 ， 效 果 如 图 7-12 所 示 。 














开始 点 (20, 20) 结束 点 (200, 20) 
控制 点 1 (20, 100) 控制 点 2 (200, 100) 
图 7-12 


开始 点 : moveTo(20, 20) 
结束 点 : bezierCurveTo(20，100，200，100，200，20) 
JavaScript 语法 : 


contet. Lezio r urve ol re iD 


参数 值 如 表 7-6 所 示 。 


表 7-6 
5 JU fii o x 

cplx 第 一 个 贝 塞 尔 控制 点 的 x 坐标 
cply 第 一 个 贝 塞 尔 控制 点 的 y 坐标 
cp2x BA WER PS BIL AY x Ab 
cp2y 第 二 个 贝 塞 尔 控制 点 的 y 坐标 

X 结束 点 的 x 坐标 

y 结束 点 的 y 坐标 

代码 清单 : 绘制 三 次 贝 蹇 尔 曲线 。 

oon 


window ondes fume Tom 

E Cea EU. es 

var can-document.getElementById("canv"); 
/ /2 .获取 绘图 环境 

var cob- can:-get emicuit c 

/ 1/3 . £2 8 exc 

cobj.beginPath () ;// 开 始 绘制 路 径 
cobj.moveTo(20,20);// &|&JF*5 


9 | 


HTML5 
EE kes 


Cob. pez Tero bua teo 20 EO 19.0. 1510 200 > 0 
cobj.lineWidth 00 ARE 

Co Re le a 

cobj .stroke();// 绘 制 空 心 的 ， 当 然 如 果 使 用 fill 那 束 是 填充 了 


j 
ciuem 


AUR UE] 7-13 Bras. 


rone 






图 7-13 


绘制 渐变 : 
Context 对 象 可 以 通过 createLinearGradient() fll createRadialGradientO 两 个 方法 创建 渐变 对 
象 ， 这 两 个 方法 的 原型 如 下 : 
OQbvyvect oreateLinearcradient (xl, yl; x2, y2); 
创建 一 个 从 G1，yJ) 点 到 (xz2，y2) 点 的 线性 渐变 对 象 的 代码 如 下 所 示 。 
OpIect oreatekadial Gradient (Kil yard ex DE Es 
创建 一 个 从 以 (x1，y]) 扣 为 加 心 、r1 AF eA BIA (x2, y2) AAD. 12 为 半径 的 
的 径 问 渐变 对 象 的 效果 如 图 7-14 BAN 











图 7-14 


渐变 对 象 创建 完成 之 后 必须 使 用 它 的 addColorStop0 方 法 来 添加 颜色 ， 该 方法 的 原型 
如 下 : 
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HTMLS 画布 一 一 在 线 绘图 板 


void addColorstop (position, Color); 


其 中 position 表示 添加 颜色 的 位 置 ， 取 值 范 围 为 [0，1]，0 表示 起 点 ，1 表示 终点 ; color 
表示 添加 的 颜色 ， 取 值 可 以 是 任何 CSS 颜色 值 。 


线性 渐变 : 
代码 清单 :绘制 线性 渐变 。 
<SCripi- 


window.onload=function() { 

REC Hem juss 

var can-document.getElementById("canv"); 

//2 .获取 绘图 环境 

Var Cob j—Can. getContext ("2d"); 

//3. 创 建 线性 渐变 参数 为 开始 坐标 x y 结束 坐标 x y 

var Grad—Coby .createhinearGradirenk (20,720,220, 220) ; 
grad.addColorStop (0,"red") ;//WME AEM 开始 颜色 red 
grad.addColorStop(0.5,"green") ;//WHZePEMIZ FIRB, green 
grad.addColorStop(1,"blue");//ix HZXTEXAE FEILER blue 
cobj.fillStyle-grad;//W BHAIHZRREXX AM 
cobj.fillRect(20,20,200,200);//£zW| tame 





rio 


AUR ul] 7-15 Bras. 





图 7-15 
镜像 渐变 : 
代码 清单 : 绘制 镜像 渐变 。 
ea 


window.onload=function () { 
//1.3R Canvas Jus 


var can=document.getElementByld("canv") ; 


9 | 


HTML5 
//2 .获取 绘图 环境 
var CObj—Can.getContext ("2d"); 
/13 BERR 参数 为 第 一 个 圆 坐 标 x1 yl 半径 rl 第 二 个 圆 坐 标 x2 y2 半径 r2 
var orad=eob] createRadialoradipne (i207 1707 40 1407 14107907; 
oracd eddColor rop (0 redi); 
oracaddCcolorSeEop(l greerm); 
cobj.fillStyle=grad;//KHIARERAMS 
Coby ke eao 20, 20), 220) 220) arate ie 








| 
ee 


BRUNA 7-16 Bra. 





图 7-16 





阴影 效果 也 是 我 们 利用 的 表现 方式 ， 阴 影 有 四 个 状态 值 控 制 ， 分 别 是 shadowBlur， 
shadowOffsetX , shadowOffsetY 和 shadowColor 。 其 中 shadowBlur 为 阴影 的 像素 模糊 值 ， 
shadowOffsetX 和 shadowOffsetY 为 阴影 在 x Hg y 轴 上 的 偏 移 值 ，shadowColor A BH eiit Ce 
值 ， 其 中 默认 的 值 是 前 三 个 值 都 为 0， 最 后 一 个 值 设 置 为 透明 黑色 。 只 需 修 改 其 中 的 两 个 值 
就 可 以 显现 出 来 阴影 效 末 。 

阴影 名 用 API 如 表 7-7 Ban. 








表 7-7 
属 性 Hi x 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 
shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形 状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形 状 的 垂直 距离 


代码 清单 : 绘制 阴影 。 


SO a oe 


window.onload=function () { 


100 


HTML5 画布 一 一 在 线 绘图 板 
var can-document.getElementById("can"); 
can.width=300; 
Cam. height= 0V0; 
ER 
oc.shadowOffsetX-5; //x 轴 偏 移 
oc.shadowOffsetY-5; //y Shin 
oc.shadowBlur=10; // 阴 影 的 模糊 级 别 
oc.shadowColor-2'"456524C"; //DHsz BW, 
oG. til lReer (507,750, 710907 1010) * 


<—/ Seige 


AUR UE] 7-17 Bras. 
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7.2 +28 Canvas 男 板 








生活 中 ， 我 们 在 一 个 画板 上 面 进行 绘画 时 ， 如 果 侦 到 不 满意 的 内 容 ， 我 们 束 需 要 使 用 橡 
皮 擦 除 不 满意 的 部 分 。 在 HTMLS 中 ， 如 果 需 要 擦 除 我 们 在 Canvas 画布 上 绘制 的 某 一 部 分 
图 像 ， 我 们 就 需要 一 个 可 以 擦 除 Canvas 元 素 上 图 像 的 “橡皮 擦 ”。 

Canvas 中 的 “橡皮 探 ” 

clearRect0) 方 法 清空 给 定 答 形 内 的 指定 像素 ， 并 且 用 一 个 表明 的 闫 色 填 充 它 。 这 就 是 
HTMLS 给 我 们 提供 了 一 个 “橡皮 擦 ”。 

JavaScript 语法 : 








Context. clearRect (和 
参数 值 如 表 7-8 Bras. 
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KAREA 
d 7-8 
2 BR Ho x 
x 要 清除 的 矩形 左上 角 的 x 坐标 
y 要 清除 的 矩形 左上 角 的 y 坐标 
= 要 清除 的 矩形 的 宽度 ， 以 像素 计 
height 要 清除 的 矩形 的 高 度 ， 以 像素 计 
代码 清单 : 页 面 绘制 一 个 填充 好 的 欧 色 和 矩 形 。 
Stelios ne 


window.onload=function() { 

/ /1.3kRKX Canvas 7638 

var can-document.getElementById("canv"); 
/ /2 .获取 绘图 环境 

var Cob Ca oe Context (TAn); 

//3. 绘 制 弧 线 
cobj.beginPath () ;//FPeaZs elit 4t 
cobj.fillStyle-2'blue'; 

Coby sae a: Tee evene 210.210) - hoo ROO) 


j 
< /Ser > 


清空 整个 画布 。 
Cobi elearRecre (0 0 eam. waecieh, Came motes) 


效果 如 图 7-18 所 示 。 








图 7-18 








代码 清单 : 通过 使 用 clearRect0 方 法 清空 给 定 窍 形 内 的 指定 像素 。 


<SCripi- 
window.onload=function (){ 


/Conv 
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var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 
var Coby Cam. get Contex cd 
//3. 绘 制 弧 线 
cobj.beginPath () ;//F Raza Blei 4 
col t1listyle—'bilue’; 
Coby ec (210.210) shoo ROO) 
cobj.clearRect(0,0,300,300); //#@ePh MAAK) Ka SABA 300px m 
WU 


SC 


效果 如 图 7-19 所 示 。 





图 7-19 





7.3 绘制 复杂 图 形 


Canvas 路 径 是 指 纯 以 贝 埃 尔 曲线 为 理论 基础 的 区 域 绘制 方式 ， 绘 制 时 产生 的 线条 称 为 路 
径 。 路 径 由 一 个 或 多 个 直线 段 或 曲线 段 组 成 ， 或 者 是 经 过 精确 计算 画 出 的 特殊 网 形 ， 路 径 是 
Canvas 实现 绘图 的 基础 。 

1. 绘制 复杂 图 形 API 介绍 

在 平时 的 使 用 中 ，Canvas 给 我 们 提供 的 矩形 绘制 方法 是 无 法 满足 我 们 的 需求 的 ， 因 此 我 
们 需要 绘制 复杂 形状 的 方法 。 

Canvas 给 我 们 提供 了 以 下 几 个 绘制 复杂 图 片 的 API: 

beginPath(): 开始 一 条 路 径 ， 或 重 置 当 前 的 路 径 。 

moveTo(x, y): 设置 线段 起 点 坐标 (x,y) 

lineTo(x, y): 添加 一 个 新 点 ， 然 后 创建 从 该 点 到 画布 中 最 后 指定 点 的 线段 〈 访 方法 只 
设 定位 置 并 不 会 绘制 线条 )。 

closePath(): 创建 从 当前 点 到 开始 点 的 路 径 。 
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EN 25-5 
fill). stroke): 圳 充 形状 或 绘制 空心 形状 。 
2. API 使 用 步骤 如 下 : 


(1) 
(2) 
(3) 
(4) 


开始 绘制 路 径 beginPath(). 

使 用 moveTo(x, y). lineTo(x, y) £z HE. 
闭合 路 径 closePath(). 

fill0 填 充 形状 或 strokeO 绘 制 边框 形状 。 


绘制 三 角形 、 滤 形 : 

绘制 三 角形 通常 我 们 需要 确定 3 个 点 ， 绘 制 矩 形 的话 ， 
strokeRect(), fillRect() Wi. 

代码 清单 : 绘制 三 角形 、 滤 形 。 
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<SCripi- 

window.onload=function () { 

var Canvas=document.querySelector('#can") ; 
var cobj-Canvas.getContext('2d'); 

Canvas .width=400; 

Canvas .height=400; 

// 绘制 三 角形 

cobj .peginPath () ;// 开 始 绘 制 路 径 

cobj.moveTo (0 0 人 US 
cobj .lineTo (50,150);// 绘 制 到 坐标 (50,150) 的 线段 
cobj.lineTo 0 0 0 HARES 
Cop Toe Po mille 
cobj.lineWidth-2; // 设 置 线 条 粗细 2px 

cobj .strokeStyle="blue";// 设 置 绘制 边框 闫 色 
cobj.stroke();//JfF*ü&£ztl 


// 绘制 填充 三 角形 

cobj .beginPath () ;/ /开始 绘 制 路 径 

cobj.moveTo (320, 50) ; // REMITE er (320,50) 
cobj.lineTo (270,120) ;//2 il BAA PR (270,120) WAREZ 
cobj.lineTo (370,120) ;//2 il BAA PR (370,120) WAEEZ 
cobj.closePath 0 ;// 团 合 绘制 路 径 

cobj .fi11Style="#009494";// 设 置 填 充 颜色 

Goby). f111()7// Fara 

// 绘制 描 边 矩形 

cobj.strokeStyle='#888'; 


Canvas A 25 Fe $e HE T 


cobj.strokeRect(50,200,100,100); WE em AAR (50,200) FEAT 100 fH 100 





// 绘制 填充 矩形 
cob}.fillStyle='rgb (244, 67,21) ' 


cobj.fillRect(180,200,100,100); //NfüxEXxuünk AAR (50,200) AES 100 m 100 


j 
“rio 


HTML5 画布 一 一 在 线 绘图 板 
效果 如 图 7-20 AIAN o 





图 7-20 
绘制 五 边 形 : 


现在 我 们 先 绘制 一 个 五 边 形 ， 思 路 如 图 7-21 所 示 。 五 边 形 就 是 在 一 个 圆 上 确定 5 个 点 
两 两 相连 ， 当 我 们 知道 2 个 点 时 就 可 以 通过 勾 股 定理 推 算 出 加 的 半径 。 











x1:160 y1:160 


图 7-21 


Nin: 绘制 五 边 形 。 


< eon 

window.onload=function() { 

var Canvas=document.querySelector('#can"); 
var cobj-Canvas.getContext('2d'); 
Canvas.width-500; 

Canvas hergnr—500; 

// 绘 制 多 边 形 
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// 勾 股 定理 得 到 半径 工 

// 第 一 个 点 坐标 (80,80)， 第 二 个 点 坐标 (160,160) 

er Me scence td. 0 0 (0 0 0 000 

war lo=5p d de 

var a=360/b; 

Olona) eb em Sl M 

for(var i-0;i«b;i-*)( //KHMTEPACUCGHE I P CB 

eos evo oo Marni ees ETE ES SENI SS Se) 
MERET dsl) ene ee 

j 

Goby. GC oesepatia 

cobj.strokeStyle="red"; 

COb7).s = roke (j= 


} 
Scrip 


效果 如 图 7-22 所 示 。 





图 7-22 


PPR II Ze ill PRL 

AR EPS RB, RIE TI hill KI BL Poly 
Poly(x, y, xl, yl, n) 

参数 1: 第 一 个 坐标 点 X，y: 

参数 2: 第 二 个 坐标 点 X1，y1; 

参数 3: 边 数 n。 


me On ARa e y ea 
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// 勾 股 定理 得 到 半径 
var r=MaTth. Sqrt ( (x1l=x) = (xl=x) r (yl=y) = n 


/ / RILE UAR JE 


var a 999 md 


cobj.beginPath () ; 


// 采 用 依次 找到 下 一 个 点 

fOr (var 1=0? igs LFF) { 

cob line lo Maen cos( (a pM ACE Meneses 5) “Mat 
IB ETE TSO ota) 

j 

Oleg aedes Ela c 

cobj.stroke(); //W Riz HUTA Ee £i11() 二 

j 


代码 清单 : XÉDSERDREERS IUS TI DE. 


eere en 

window.onload=function() { 

var Canvas=document.querySelector('#can"); 
var cob j=Canvas.getContext ('2d') ; 

Canvas .width=350; 

Canvas .height=350; 

/ /绘制 多 边 形 

Poly 919. - 00 Lod, 7 S0. 5) 

Poly (207.207 14077140776) 

Poly (90,240,140,240,10) 


/ /多 边 形 绘制 函数 Poly 

Ome LO EO MO ye IL Ale sad 

var r-Math.sqrt((xl-x)* (xl-x)-*(yl-y)*(yl-y)); 

var a-360/n; 

Cob]. Sbeqinrarh() ; 

fOr Viele 1=0? ey ee) { 

SOB db itae Bo» (ME os (e414 s) Merial TES Dose vi Ma ere mie Mak 
eT 

j 

cobyedtosePathu 

CoD e troke); 

j 


j 
cioe 


Ne 
da 
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EE kes 
BURMA] 7-23 所 不 。 


图 7-23 


7.4 绘制 文本 


Canvas 给 我 们 提供 了 绘制 文学 的 方法 。 





绘制 文学 主要 属性 和 方法 : 
font 属性 用 来 设置 或 返回 画布 上 文本 内 容 的 当前 字体 属性 。 该 属性 的 用 法 与 CSSfont 属 
性 使 用 方式 相同 ， 例 如 : 


Coie ee eo ae e Gey 


font 属性 的 默认 值 如 表 7-9 所 示 。 











表 7-9 


默认 值 : | 10px sans-serif 


textAlign 属性 用 来 设置 或 返回 文本 内 容 的 当前 对 章 方式 。 

通常 ， 文 本 会 从 指定 位 置 开 始 ， 不 过 ， 如 果 您 设置 为 textAlign='"right" 并 将 文本 放置 到 
位 置 130， 那 么 会 在 位 置 150 结束 。 

textAlign 属性 的 默认 值 如 表 7-10 所 示 。 














表 7-10 


默认 值 : | start 


Solos coge stare iia 








表 7-11 
值 fii x 
start 默认 。 文 本 在 指定 的 位 置 开始 
end 文本 在 指定 的 位 置 结束 
center 文本 的 中 心 被 放置 在 指定 的 位 置 
left 文本 左 对 齐 
right 文本 右 对 齐 
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图 7-24 演示 了 textAlign 属性 值 对 齐 方 式 。 


textAli gn- "start"; — 
textAlign- "end"; Sata 
textAlign- "left"; HBE 
textAlign="center"; HBE 
textAlign- "right"; HBE 

lk 7-24 








textBaseline 属性 设置 或 返回 在 绘制 文本 时 的 当前 文本 基线 。 
属性 值 如 表 7-12 所 示 。 

















表 7-12 
值 fii — 3X 
alphabetic 默认 。 文 本 基线 是 普通 的 字母 基线 
top 文本 基线 是 em 方 框 的 顶端 
hanging 文本 基线 是 悬挂 基线 
middle 文本 基线 是 em 方 框 的 正中 
ideographic 文本 基线 是 表意 基线 
bottom 





文本 基线 是 em 77 HE AY JER Sita 
图 7-25 演示 了 textBaseline 属性 支持 的 各 种 基线 。 


. top 
hanging . LLL 





middle 


A il € bottom 
ideoaraphic 





图 7-25 
fillTextO 方 法 在 画布 上 绘制 填 色 的 文本 。 文 本 的 默认 颜色 是 黑色 。 


Javascript 语法 : 














Contexto ri erie (Cext cc i, mao 


参数 值 如 表 7-13 所 示 。 


表 7-13 
2 M jo X 
text 规定 在 画布 上 输出 的 文本 
x 开始 绘制 文本 的 x 坐标 位 置 〈 相 对 于 画布 ) 
y 开始 绘制 文本 的 y 坐标 位 置 《 相 对 于 画布 ) 
max Width 





可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 








strokeTextO 方 法 在 画布 上 绘制 文本 〈 没 有 填充 )。 文 本 的 默认 硕 色 是 黑色 。 
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E 


JavaScript 


语法 : 


Context etrokeltexb (text x y maxWideh), 


参数 值 如 表 7-14 rane 


表 7-14 
数 fii 述 
规定 在 画布 上 输出 的 文本 
开始 绘制 文本 的 x 坐标 位 置 ( 相 对 于 画布 ) 


y 开始 绘制 文本 的 了 坐标 位 置 《相对 于 画布 ) 
max Width 可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 
代码 清单 : 绘制 文本 
<Seripe- 


window.onload=function () { 


var can=document.getElementByld("can") ; 
can.width=500; 
can Menchz— 500; 


Vat 1OC=Can. dec ontexrt ("2d"); 


ao 
coL 
Coby 
eol 
ole 
(OI, 
eol 
eo 
Colby 
j 


.beginPath() 

.font="36px 微软 雅 黑 "， 

.ShadowOffsetX-2; 

.ShadowOffsetY-2; 

.ShadowBlur-5; 

. shadowColor="#56524C" 

.ClosePath() 

.StrokeText (" 日 光照 到 的 一 切 地 方 都 有 阴影 "，20,200) ; 
.fillText ("&EÁA Aah B5",20,100); 


ccm 


BRUNA 7-26 Bra. 
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每 个 人 都 是 一 座 孤 岛 


目光 照 到 的 一 切 地 方 都 有 阴影 





图 7-26 


HTML5 画布 一 一 在 线 绘 图 板 





7.5 ”图片 操作 





Canvas 允许 将 图 像 文件 插入 画布 ， 做 法 是 读 取 图 片 后 ， 使 用 drawImage 方法 在 画布 内 进 
ITER. 


7.5.1 绘制 图 片 方 法 


定义 和 用 法 

drawImage0 方 法 在 画布 上 绘制 图 像 、 画 布 或 视频 。 

drawImage() 方 法 也 能 够 绘制 图 像 的 某 些 部 分 ， 以 及 增加 或 减少 图 像 的 尺寸 。 
(1) 语法 1 

定位 图 像 : 





context.drawImage (img,x,y); 
(2) 语法 2 
定位 图 像 ， 并 规定 图 像 的 客 度 和 局 度 : 








context drawlmage (img; ZH Vv width, height, 
(3) 语法 3 
BJR, FFE Canvas KE ALLEY BoP : 
context- draw mage (me sx SWEET cos SEPT Sabio nda el 


参数 值 如 表 7-15 Bran. 








表 7-15 
2 数 fi 述 
img 规定 要 使 用 的 图 像 、 画 布 或 视频 
SX Aye. FPA BY UIE) x 坐标 位 置 
sy Aye. FPR BITE y 坐标 位 置 
swidth uix. SOUPE VERIS VERE 
sheight uie. OV) VERIS ESSE 
x 在 画布 上 放置 图 像 的 x 坐标 位 置 
y 在 画布 上 放置 图 像 的 y 坐标 位 置 
width 可 选 。 要 使 用 的 网 像 的 宽度 《伸展 或 缩小 图 像 ) 


height 可 选 。 要 使 用 的 岁 像 的 高 度 《〈 伸 展 或 缩小 图 像 ) 
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7.5.2 ”在 画布 中 绘制 一 张 图 片 


代码 清单 : 在 男 布 上 绘制 一 张 图 上 。 


ea 








window.onload=function () { 
ya 

var can=document.getElementByld("canv") ; 
/ / 2 .获取 绘图 环境 

var cobgecan-getContesxt("2d'5 

//3 .绘制 图 片 

var Img=new Image(); 

Img .onload=function() {// 等 待 图 片 加 载 完 成 再 进行 绘制 
cob- droawlmage (Img, 0 0 > 

j 

dope coser po 

} 

«eene OE > 


AUR uk 7-27 Bras. 





T=21 


7.6 像素 操作 





本 节 主 要 介绍 Canvas 在 图 像 像素 数据 操作 方面 的 常用 API， 如 表 7-16 Dra. 
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表 7-16 
Ao d fi x 
createImageData() GET]. 22 ELIT] ImageData 对 象 
getImageData() 返回 ImageData 对 象 ， 该 对 象 为 画布 上 指定 的 矩形 复制 像素 数据 
putImageData() 把 图 像 数 据 (从 指定 的 ImageData 对 象 ) 放 回 画布 上 


createImageData() 方法 ， 有 两 个 版 本 的 ereateImageData() 方法 : 
(D 以 指定 的 尺寸 〈 以 像素 计 ) 创建 新 的 ImageData 对 象 : 


var imgData=context.createImageData (width, height) ; 


(2) 创建 与 指定 的 另 一 个 ImageData 对 象 尺 寸 相同 的 新 ImageData 对 象 〈 不 会 复制 图 像 
数据 ): 


var imgData=context.createImageData (imageData) ; 


参数 值 如 表 7-17 所 示 。 





表 7-17 
width ImageData 对 象 的 宽度 ， 以 像素 计 
height ImageData 对 象 的 高 度 ， 以 像素 计 
imageData 另 一 个 InageData 对 象 


getImageData() 方 法 : 

getImageData() 方 法 返回 ImageData 对 象 ， 该 对 和 象 捞 贝 了 画布 指定 矩形 的 像 权 数据 。 
返回 对 象 身上 有 data, width, height 属性 ， 参 考 如 图 7-28 Atm: 

data 属性 : 体 存 每 个 像素 的 rgba 1E; 

对 于 ImageData 对 象 中 的 每 个 像素 ， 都 存在 着 四 个 信息 ， 即 RGBA 值 : 

R - 红色 (0-255) 

G- 绿色 (0-255) 

B- f (0-255) 

A -alpha 通道 (0-255; 0 是 透明 的 ，255 是 完全 可 见 的 ) 

例如 这 个 data 数组 : 


| ] 


数组 中 下 标 0 一 3 代表 第 一 个 像素 ， 信 息 依次 为 rgba(10，195，230，255)， 第 二 个 像素 
为 下 标 4 一 7， 后 面 像素 依次 类 推 。 

height 属性 : 保存 对 象 高 度 ; 

width 属性 : 保存 对 象 宽 度 。 

效果 如 图 7-28 所 示 。 
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Y ImageData 
¥ data: Uint8ClampedArray[98888] 
P [8 . 9999] 
E [100908 . 19999] 
P [20008 .. 29999] 
P [300908 .. 39999] 
P [40068 .. 49999] 
P [50008 .. 59999] 
P [60060 .. 69999] 
E [70008 .. 79999] 
E [50008 . 59999] 
k proto : Uint8ClampedArrayvy 
height: 158 
width: 158 
* proto : ImageData 
图 7-28 
Javascript 语法 : 


var imaData=Context get limageData(x y, width, herght) ; 


参数 值 如 表 7-18 所 示 。 


x 7-18 
2 JJ Box 
X 开始 复制 的 左上 角 位 置 的 x 坐标 
y 开始 复制 的 左上 角 位 置 的 y 坐标 
width 将 要 复制 的 矩形 区 域 的 宽度 
height 将 要 复制 的 矩形 区 域 的 高 度 


putImageData() 方法 : 
putImageData() 方法 将 图 像 数 据 ( 从 指定 的 ImageData 对 象 ) 放 回 画布 上 。 
JavaScript 语法 : 





= 


参数 值 如 表 7-19 所 示 。 

















表 7-19 
2 JH 描 — XN 
imgData 规定 要 放 回 画布 的 ImageData 对 象 
X ImageData X ZA EAI x 坐标， 以 像素 计 
y ImageData 对 象 左上 角 的 y 坐 标 ， 以 像素 计 
dirtyX 可 选 。 水 平 值 (x)， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 
dirtyY 可 选 。 水 平 值 (y)， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 
dirtyWidth 可 选 。 在 画布 上 绘制 图 像 所 使 用 的 宽度 
dirtyHeight 可 选 。 在 画布 上 绘制 图 像 押 使 用 的 高 度 
代码 清单 : 像素 操作 。 
Secum B 
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HTML5 画布 一 一 在 线 绘图 板 
window.onload=function () { 
var can-document.getElementById("can"); 
var Cobj—Can.getContext ("2d"); 
Cobe Degn Path), 
cobj.fillStyle="red"; 
Coby mu cU DUE ESQ Oe: 
COW a eae D. 
aie eroe Gat lmacewera (50. S0 15/0, 7.59) 5 天 由 站 用 50,50 esi ls0 mp 150 
图 片 内 容 返回 结果 为 一 个 对 象 
// 对 象 保 存 像 素 总 数量 = 对 象 的 宽度 * 对 象 的 高 度 
for(var iOi aa avidin aa height Ir) 
aa.data[4*1i]=10; 
db ap iL | = iS 5 
Mesa es Sg 
aa. darca | dbsoibae o] S255 4 





aa.data 
aa.data 


[ 
[ 
[ 
[ 


Goby). DUE ImMageData (aa, 200, 200) 
j 
Ser 


BRUNA 7-29 Bras. 
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7.7 $BBEESEIR E S A AR 


所 谓 的 矩阵 转换 是 线性 代数 中 的 一 个 概念 。 在 线性 代数 中 ， 线 性 变换 能 够 用 矩阵 表示 。 








而 在 图 形 独 像 学 中 ， 和 矩阵 转换 一 般 是 用 来 表示 网 形 的 变换 ， 如 平移 、 旋 转 、 缩 放 和 笠 切 。 而 
这 些 变化 全 部 都 是 基于 怎 阵 变换 计算 而 出 的 。 但 是 矩阵 运算 比较 复杂 ，Canvas 已 经 把 相应 的 


ns | 





HTML5 

实战 宝典 
变换 封 疙 成 函数 ， 我 们 可 以 下 接 使 用 从 而 简化 了 我 们 的 工作 。Canvas 里 面 的 变换 包括 平移 、 
旋转 、 缩 放 如 表 7-20 一 表 7-25 所 示 。 











转换 
表 7-20 
H. 3 描 x 
scale() 缩放 当前 绘 网 至 更 大 或 更 小 
rotate() 旋转 当前 绘图 
translate() 重新 映射 画布 上 的 (0, 0) 位 置 
transform() TRU ELI] P Fe XB RE 
setTransform() 将 当前 转换 重 置 为 单位 和 矩阵， 然后 运行 transform() 
缩放 
定义 和 用 法 : 











scale( 方 法 缩放 当前 绘 网 ， 更 大 或 更 小 。 
JavaScript 语法 如 下 : 


context. scalel(scalewidth,scaleheiaght); 





表 7-21 
2 数 描述 
scalewidth 缩放 当前 绘 风 的 宽度 (1=100%，0.5=50%，2=200%， 依 次 类 推 ) 
scaleheight 缩放 当前 绘图 的 局 度 (1=100%，0.5=50%，2=200%， 依 次 类 推 ) 
旋转 
定义 和 用 法 : 
rotate() 方 法 旋转 当前 的 绘图 。 
JavaScript 语法 如 下 : 
context.rotate (angle); 
表 7-22 
2 KB jh — X 
旋转 角度 ， 以 弧度 计 
angle 如 需 将 角度 转换 为 弧度 ， 请 使 用 degrees*Math.PI/180 公式 进行 计算 
举例 : 如 需 旋转 5 度 ， 可 规定 下 和 面 的 公式 : 5*Math.PI/180 
平移 
定义 和 用 法 


translate(0 方 法 重新 移动 绘 多 xx 轴 或 y 轴 位 置 。 
JavaScript 语法 如 下 : 
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矩阵 转换 
定义 和 用 法 : 


context.translate(x, y); 


HTML5 画布 一 一 在 线 绘图 板 


A 1-23 

fii 述 
添加 到 水 平 坐标 〈“x) 上 的 值 
添加 到 垂直 坐标 〈y) 上 的 值 


国 布 上 的 每 个 对 象 都 拥有 一 个 当前 的 变换 窍 阵 。 
transform( 方 法 蔡 换 当前 的 变换 算 阵 。 它 以 下 面 描述 的 乍 阵 来 操作 当前 的 变换 乍 阵 : 


ac ebd f0 0 1 








transform( LIFA ee. PAHAR SH IAE o 


JavaScript 语法 如 下 : 


e 


f 


定义 和 用 法 : 


colbextettamsbormedcbucd ejt) 


dA 7-24 


fii 述 
水 平 缩放 绘图 
水 平 倾斜 绘图 
垂直 倾斜 绘图 
垂直 缩放 绘图 
水 平移 动 绘图 
重生 移动 绘图 


画布 上 的 每 个 对 象 都 拥有 -一 个 当前 的 变换 矩阵 。 
setTransform0) 方 法 把 当前 的 变换 矩阵 重 置 为 单位 矩阵 ， 然 后 以 相同 的 参数 运行 


transform()。 





绘制 一 个 和 矩形， 通过 setTransform() 重 置 并 创建 新 的 变换 宅 阵 ， 再 次 绘制 矩形 ， 重 置 并 


创建 新 的 变换 符 阵 ， 然 后 再 次 绘制 矩形 。 
JavaScript 语法 如 下 : 


Context- sepu umso Jm ducc E) g 
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实战 宝典 
x 7-25 
2 3* Hio xk 
à 水 平 旋转 绘图 
b 水 平 倾斜 绘图 
垂直 倾斜 绘图 
d 垂直 缩放 绘图 
水 平移 动 绘图 
f 垂直 移动 绘图 





7.8 绘图 板 实战 


要 和 奉 看 本 文 展示 的 示例 需要 一 个 浏览 万 并 能 访问 mternet。 所 有 示例 都 在 一 个 真实 网 站 








上 提供 《参见 参考 资料 画板 示例 )。 

本 小 方 主要 是 完成 一 个 绘图 板 ， 所 用 知识 主要 是 前 儿 小 市 的 知识 点 ， 利 用 Canvas API 
提供 的 属性 、 方 法 来 制作 一 个 绘图 板 。 

功能 介绍 : 

G) 文件 选项 :新建 画布 、 返 回 〈 撤 销 )、 保 存 〔 保 存 为 图 片 )、 绘 制 完 成 后 保存 下 载 到 
电脑 。 

(2) IAI: £x. Æ, Fel. 

(3) 方式 : 填充 、 男 线 。 

(4) 粗细 : 选择 线条 粗细 。 

(5) WE: WERE, AAE. 

(6) PREZ 

a AL: AZo 

HTML: 











<'docryoe him- 

even lang lok > 

<head> 

<meta charset="UTF-8"> 

<title>iMiK</title> 
ee 
ee 
s«scrdptespe-"ys/exeanweseJst3ss scio 

«4 [endif ]|==> 
Se 

<link rel="stylesheet" href="CSS/Canvas.CSS"> 
</head> 

<body> 

<div class="map"> 


“Gi class=" menu" > 
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HTML5 画布 一 一 在 线 绘图 板 
<ul class- "file float" 
«li»XfF«/li» 
<u clleise= “Sein > 
Ea A 
<1i>iklFl</1li> 
<1i> 保 存 </1i> 
«IL 
xU DLL: 
<ul esee draw 下 Ga > 
<i SH ES aate [<sjoein ace yo" sec terere s] eo dla = 
«elite «edis e sr One 
«lu Gees solle WI mere See Toa 
«I5 le een obs 
uda olestie nis 
«UL 
Se EUMD 


«mde warns ido > 
人 

<div e€lass— son > 

<input type-"range" name-"points" min="1" max-"10" value="1" /> 
Sie 

UBL 


“Uitte lss eeoreaE > 
后 
sss Som 
人 
cen 
有 
Bee 

e oe 

<ul elass=" style float" > 

Tn a ene vao a a </ 1a 
ud CIS ope 

<i Gieue er ole METTE USES mee aS 

< kr a 

«uibus 

4 I 

<ul class="erase float"> 

«li data-role="clearRect ">i EE #t</1i> 

«udo 

«telis 

“Oanvas width="950" gemit dae S69 > 

VT RAS A WSO XE Canvas! 


</canvas> 
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HTML5 
EE kes 


ge 
wo > 
«yt enn 


Javas Ste 

/* 

构造 函数 shape (cob, oOpCIoOnsS) 

参数 cobj 为 2d 绘制 环境 

参数 options 填充 色 边框 色 线条 粗细 绘制 样式 绘制 方式 
P 

EUnet TOMS dp ecol e EOD | 


[pco ME 


this.options = options || {1};// 没 有 传递 options 参数 EXAJJANIA 
"Ue (Gti s eqs os. TU / 22222360) 

I ee Ne el Ne eye en ee 

Eats Color il opr lons Soo Lor OE 

thro du = ee ee L wa 

pim sd = ol onsec a tee 


j 

j 

shape.prototype = { 

/ /绘制 线条 
| 
eS x = x MEE c 


pnto a m EE e 


chis xi = x1 || ire xis 
pins MEET a ile 
this.aa-(this.aa--'stroke')?this.aa:'stroke'; 


aS eo] musto = OT, 
plumseeolg estemos ens Sem 
tois CoPI eret bio bed me — talkies lw. 

this eo uem ath, 

Tmi exeo no le co elas, 2 
wigs Oolong. diari rete Ee El 
iplocs elegy) elakies aal (yy. 
thisveoon] eed os ct arin (je: 

talerett y lec lime 

by 

// 绘 制 矩 形 

eC RUNG © Moma, en yell a 
Eni 二 x || chis. zs 


ell 57 ce Ip eiae we 


ic debe codd ecce weg die Pilates de 
iussus 
this.aa-(thrs.aa--'stroke'||thzs.aa--'fill')?this.aa:'stroke'; 
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HTML5 画布 一 一 在 线 绘图 板 


EMS. coperti tte =A Sonel or 

this. cob. Strokes yle = Enis seo lor, 

wines. CObg Inen bhi A e slew 

minns exe logo enim SEN Ns 

Eme CODI et OD ein bite 7) roe mete Mis le i 7 lone 
jum ce 

pitts COlbg lj ass eee e 

tois eco. Closer an 

Gites «sty ee 

by 

// 绘 制 圆 形 

本 人 | 

ilc = EE S 

chs xi = x1 Seis a 

hee > 

ple ey = | a sale 

Karea = eet ala 

this.aa-(this.aa--'stroke'||this.aa--'fill')?this.aa:'stroke'; 

ju mc = 22 NE DE SENE ERES ile 02 

EN 


作风 


this 


Tells 
felonies 
eles: 
phis 
ERES 
pince 
EOIS, 


by 


Tesle gi es I maneo Or 

Cobi otrokeotyle — vents. “colon, 

Cobe Taeniidae asd dE de 

copi. beginkath(), 

soaa e e hs bmc CLUS, a c Mid cl a. 
Goby [ems aa) 

CObg eC los ere INS 


style = “arc”; 


clearkect: EEC 


TALS 
TALS 


Cao: 
EELE 
(ele = 
je lela ste 


} 
} 


.SW = 20; 
xl S= kl | cnis xis 
SIN 2 
= wl 8 


Ce 由 ER 


style = "clearRect"; 


UMC lm Clean (CC anvac (exeo no oe GEO S el 


var type = i pe I Ime. 
Canvas.onmousedown = function (ev) { 
var lx = ev.layerX; 


var ly = ev.layerY; 
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HTML5 
EE 实战 宝典 


var flag=false; 

var shapes = new shape(cobj, options); 
document debe n 
Canvas.onmousemove = function (ev) { 
var cx = ev.layerX||0; 

var cy = ev.layerY||0; 

if (type=="clearRect") { 

flag=true; 

shapes = new shape(cobj, options) ; 
shapes [type] (cx,cy); 

flag&&arr.push (shapes); 

Jjelse( 

document. tc ke—2 - 


Cob]. clearkect (0 07. Canvas. warn, “Canvas heahnt 


flag=true; 
| 
arria erent sae valved 


} 

Shapes Eye M 
} 

j 

document -onmouseup — function e 
Canvas. onmousemove = null; 
ee S Spes 
document.onmouseup = null; 

} 

} 

} 


var arr = e 

Ss (function()1 

var Canvas = document.getElementsByTagName ("Canvas") [0]; 
var cob) — Canvas -Je L ontel (TdT); 

var opLIlons n); 

| 
options.aa=$ (this). -attr ("data role"), 

draw (Canya ee COb jo ahe tee Gabel Toe opio 
jj 

(Tt oa owe (FUNCION) 

var indes- s (~ floara Index (Chis), 

SL es obsol sc neue - 

(sola) (le Vela egedie le oes 

S (chs ee esc pcm ouncit 0S6 

,uneeclion() 1 

EESC ED Rro Unde Ys) E 
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HTMLS 画布 一 一 在 线 绘图 板 
}) 


人 
("som cest ol soles) Viacom” E 
I) 


// 男 图 

$(W araw -son li”) Click(funcetion()1 

draw (Canvas, CObg, < (this).attr (data rolce"), options), 
TI 

}) 


/ /线条 粗细 
Sr anto son i (el ek ee om 


$ (vl1inew") .HTML(S (tais) val ()) s 
options.lw=$ (this) .val(); 
)) 


/ / ERES, 


S(" Color ,Som Li Liajome”) .cliance (de baie exa. () Y 


LE ($ (this) -artir ‘deta-role")——" stroke) 4 
options- sC Color- (Chis) -vall),; 

Jjelse( 

options. fcolor=> (Chis). val); 

| 
Se 
}) 


/ /绘制 的 方式 
| 
options.aa=$ (this) .attr("data-role") ; 
S(T er 5 aM (ee Ee/( 

}) 


// 新 建 

SON eS croak) cc (me ee 

var index=$ (W rile =. Sone 11”) ies) 
if (index==0) { 


Coby. cleoanrRecr (0, 0 Canvas widen, e vicis dac qeu es 
ane = ler 

else if (index==1) { 

cob- clearRkec i (0 0 Canvass waden, anvas Neigh, 
arr.pop(); 

[son Mec M Eme simil: Ce iso Men MET 


aor aid) Ez ead an el 
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else if (index==2) { 

var data=Canvas.toDataURL ("image/png") ; 
location.href-data.replace("image/png","image/octet-stream"); 
j 

}) 

ij 


效果 如 图 7-30 所 示 。 


BS [ES] 粗细 [3px] e GE] eat [填充 ] 





图 7-30 
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8.1 HTML5 对 多 媒体 的 支持 
8.2” 首 频 和 视频 标签 

8.3 ” 首 频 和 人 视频 API 

8.4 aK 


8.1 HTML5 对 多 媒体 的 支持 





在 Web 中 不 仅 有 文本 、 图 斤 文 件 ， 还 有 视频 、 音 频 等 多 媒体 文件 。 在 HIMLS 友 布 之 
前 ， 播 放 音 频 、 视 频 需 要 借助 诸如 Flash Player 等 第 三 方 搬 件 来 解决 这 个 问题 。 现 在 使 用 
HTMLS 在 网 页 中 添加 视频 、 首 频 如 同 引 用 图 片 一 样 的 简单 、 方 便 。 

本 节 主 要 问讯 者 介绍 Video TAK Audio 元 素 ， 以 及 它们 所 文 持 的 不 同 的 视频 、 音 频 类 型 。 








8.1.1 Video 支持 视频 格式 


1. 视频 编码 和 解码 

所 谓 视 频 编 码 方式 是 指 通过 特定 的 压缩 技术 ， 将 某 个 视频 格 陈 文件 转换 成 另 一 种 视频 格 
起 文件 的 方式 。 

视频 解码 是 指 用 特定 方法 把 已 经 编码 的 视频 还 原 成 它 原 有 的 格式 ， 进 行 播放 。 

2. 编码 说 明 

Theora 视频 编码 是 开放 而 且 免 费 的 视频 压缩 编码 技 术 ， 由 Xiph 基金 会 有 发布。 做 为 该 基 
EA Ogg 项 目的 一 部 分 ， 从 VP3 HD 高 清 到 MPEG-4/DivX 格式 都 能 够 被 Theora 很 好 地 文 
持 。 使 用 Theora Ft iia FE fif Az A VF AY 9* ,. Firefox 和 Opera 将 通过 新 的 HIMLS 元 素 提 供 对 
Ogg/Theora 视频 的 原生 文 持 。 

H.264 视频 编码 是 在 MPEG-4 技术 的 基础 之 上 建立 起 来 的 ，H.264 与 以 前 的 国际 标准 如 
H.263 和 MPEG-4 相 比 ， 为 达到 高 效 的 压缩 ， 充 分 利用 了 各 种 元 余 ， 统 计 元 余 和 视觉 生理 元 
Ro WEIGH (Blu-ray) 束 采 用 这 种 格式 。 

当前 ，Video 元 素 支 持 三 种 视频 格式 如 表 8-1 所 示 。 主 流 浏 览 器 对 这 三 种 格式 的 支持 情 
况 如 图 8-1 所 示 。 




















X 8-1 
说 明 
Ogg 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 
MPEG4 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 
WebM 带 有 VPS 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 
浏览 器 MP4 WebM Ogg 


Internet Explorer9+ YES | NO NO 
Chrome 6+ YES | YES | YES 
Firefox 4+ NO. | VES. | YES 
Safari 4+ YES | NO NO 


Opera 11.5+ NO | YES | YES 
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多 媒体 一 一 自 定义 米 酷 播放 顺 


8.1.2 Audio x: EE TS 


当前 ，Audio 元 素 支持 三 种 音频 格式 : MP3，Wav， 和 Ogg 如 图 8-2 所 示 。 





浏览 器 MP3 Wav Ogg 





Internet Explorer 9+ YES NO NO 





Chrome 8+ YES | YES | YES 





Firefox 4+ TES YES YES 


Safari 4+ YES | YES |. NO 











Opera 15+ YES YES YES 





8-2 


8.1[3 Audio/Video 浏览 器 支持 情况 
Audio 75628 3| T3, gs xc Jr Tei DU AH E] 8-3 所 示 。 


$ ® 0 € e 


Internet Explorer 9+ | Firefox 4+ | Opera 11.5+ Chrome 6+ | Safari 4+ 




















8-3 
Video JUD tas oc dr IH DUAE] 8-4 所 示 。 


S € O © e 


Internet Explorer 9+ Firefox 4+ Opera 11.5+ Chrome 6+ Safari 4+ 


图 8-4 


EL NAD LAUS SE 





HTMLS 让 我 们 可 以 如 同 引入 图 片 一 样 简单 地 使 用 音频 、 视 频 。 
8.2.1 Audio 元 素 


HTMLS 规定 了 一 种 通过 Audio 元 和 素来 包含 音频 的 标准 方法 。Audio 元 素 能 够 播放 声音 
文件 或 者 音频 流 。 
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QER 

可 以 在 开始 标签 和 结束 标签 之 间 放 置 文本 内 容 ， 这 样 旧 的 浏览 器 就 可 以 显示 出 不 支持 该 
标签 的 信息 。 

浏览 器 全 文 持 

在 上 节 中 ， 我 们 说 过 浏览 右 对 于 音频 格式 的 文 持 情 况 ， 要 让 所 有 浏览 右 都 可 以 播放 音频 
文件 ， 我 们 需要 给 audio 引用 全 少 2 个 指定 格式 的 音频 文件 。 我 们 可 以 通过 <source> 链 接 不 
同 的 音频 文件 ， 这 样 我 们 可 以 做 到 只 要 它 文 持 <audio> 标 签 ， 浏 览 右 将 使 用 第 一 个 可 识别 的 
格式 。 











«ieugploBLo: oonereols os 

«source src="audio.ogg" type-"audio/ogg"» 
«source src-"audio.mp3" type-"audio/mpeg"» 
您 的 浏览 器 不 支持 audio， 请 升级 浏览 器 。 

</audio> 


«audio» 标签 的 属性 如 表 8-2 Bran 


表 8-2 
— 标签 添加 上 此 属性 ， 音 频 在 就 绪 后 马上 播放 
—: 标签 添加 上 此 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按 负 
Tm 标签 添加 上 此 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 





preload 标签 添加 上 此 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 
如 果 使 用 "autoplay"， 则 忽略 该 属性 
src url 添加 要 播放 的 音频 的 URL 


8.2.2 Video 元素 


HTMLS 规定 了 一 种 通过 Video 元 素来 包含 视频 的 标准 方法 。 
页 面 讨 加 视频 : 


svideo Sre t mesecsmpod'exo m Todi eonim os 
您 的 浏览 器 不 支持 video， 请 升级 浏览 器 。< /video> 


CD 提示 

可 以 在 开始 标签 和 结束 标签 之 间 放置 文本 内 容 ， 这 样 旧 的 浏览 器 就 可 以 显示 出 不 支持 该 
标签 的 信息 。 

在 上 下 中 ， 我 们 说 过 浏览 右 对 于 视频 格式 的 文 持 情况 ， 要 让 所 有 浏览 右 都 可 以 播放 视频 
文件 ， 我 们 需要 给 Video 引用 至 少 2 个 指定 格式 的 视频 文件 。 我 们 可 以 通过 <source> 链 接 不 
辣 的 视频 文件 ， 这 样 我 们 可 以 做 到 只 要 它 文 持 <video> 标 签 ， 浏 贤 磊 将 使 用 第 一 个 可 识别 的 
格式 。 
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% RUN A EXER 
<video Controls = conia ede 
<scurce src-'move.ogg'»«/scurce» 
<scurce src-'move.mp4'»«/scurce» 


LRN VBS AN EF Video, /eo 


«video» 标签 的 属性 如 表 8-3 所 示 。 





x 8-3 
Od 标签 添加 上 此 属性 ， 则 视频 在 就 绪 后 马上 播放 
标签 添加 上 此 属性 ， 则 向 用 户 显 示 控 件 ， 比 如 播放 按钮 ， 声 音 等 





width pixels 设置 视频 播放 器 的 宽度 


src url 要 播放 的 视频 的 URL 

ica 标签 添加 上 此 属性 ， 则 当 媒 介 文件 完成 播放 后 再 次 开始 播放 
本 pm FE. LICE, WCE LE, OPS 
P P 如 果 使 用 "autoplay"， 则 忽略 该 属性 
height 设置 视频 播放 器 的 高 度 





8.3” 首 频 和 视频 API 


vU HH 


8.3.1 HTML s^ Video 在 各 大 浏览 器 呈现 

















作为 开发 人 员 ， 我 们 使 用 视频 播放 器 时 一 定 希 望 它 的 外 观 在 各 个 浏览 右 中 看 起 来 一 致 ， 
但 是 在 下 图 中 可 以 看 到 目前 各 个 浏览 右 提 供 的 视频 控制 工具 条 外 观 是 各 不 相同 的 ， 如 图 8-5. 
图 8-6 和 图 8-7 所 示 : 

IE ixl as: 











KINA gy (Firefox): 





谷歌 浏览 器 (Chrome): 


> © EE DE @ 


图 8-7 








我 们 需要 给 用 户 提供 更 好 的 用 户 体验 ， 所 以 布 望 它 的 外 观 在 各 个 浏览 圳 中 看 起 来 一 致 。 
在 后 面 的 小 节 中 ， 我 们 将 告诉 大 家 如 何 让 Video 控制 工具 在 各 大 浏览 器 保持 一 致 。 
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HTML5 


BEEN 实战 宝典 
8.3.2 ”音频 和 视频 API 介绍 





下 面 ， 我 们 需要 从 头 来 创建 这 个 控制 工具 条 ， 利 用 HIML 和 CSS 再 加 上 一 些 图 厂 实 现 
起 来 并 不 难 ， 另 外 通过 HTIML5S 多 媒体 元 素 提 供 的 API 可 以 很 方便 地 将 创建 的 任何 按钮 与 播 
放 / 和 暂停 等 事件 进行 绑 定 。 

HTML5 DOM 为 <audio> 和 <video> 元 素 提 供 了 方法 、 属 性 和 事件 。 

这 些 方法 、 属 性 和 事件 允许 您 使 用 Javascript 来 操作 <audio> 和 <video> 元 系 。 

HTMLS Audio/Video 方 法 如 表 8-4 所 示 。 








表 8-4 
A. 3 fü — XX 
addTextTrack() 问 首 频 /视频 添加 独 的 文本 轨道 
canPlayType() 检测 浏览 器 是 否 能 播放 指定 的 首 频 /视频 类 型 
load() 重新 加 载 音 频 / 视 频 元 素 
play() 开始 播放 音频 /视频 
pause() 暂停 当前 播放 的 首 频 /视频 


HTMLS Audio/Video 属性 如 表 8-5 所 示 。 


















































表 8-5 
属 性 JH — X 
audioTracks 返回 表示 可 用 音 轨 的 AudioTrackList 对 象 
autoplay 设置 或 返回 是 否 在 加 载 完 成 后 随即 播放 音频 /视频 
buffered 返回 表示 音频 /视频 已 缓冲 部 分 的 TimeRanges 对 象 
controller 返回 表示 音频 /视频 当前 媒体 控制 器 的 MediaController 对 象 
controls 设置 或 返回 音频 /视频 是 否 显 示 控 件 〈《 比 如 播放 /和 暂停 等 ) 
crossOrigin 设置 或 返回 音频 /视频 的 CORS 设置 
currentSrc 返回 当前 音频 /视频 的 URL 
currentTime 设置 或 返回 音频 /视频 中 的 当前 播放 位 置 ( 以 秒 计 ) 
defaultMuted 设置 或 返回 音频 /视频 默认 是 否 静 音 
defaultPlaybackRate 设置 或 返回 音频 /视频 的 默认 播放 速度 
duration 返回 当前 音频 /视频 的 长 度 〈 以 秒 计 ) 
ended 返回 音频 /视频 的 播放 是 合 已 结束 
error 返回 表示 音频 /视频 错误 状态 的 MediaError 对 象 
loop 设置 或 返回 音频 /视频 是 人 否 应 在 结束 时 重新 播放 
mediaGroup 设置 或 返回 音频 /视频 所 属 的 组 合 〈 用 于 连接 多 个 音频 /视频 元 素 ) 
muted 设置 或 返回 音频 /视频 是 否 静 音 





返回 音频 /视频 的 当前 网 络 状态 


ii 


networkState 
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ls TE 
paused 
playbackRate 
played 
preload 
readyState 
seekable 
seeking 
SIC 
startDate 
textTracks 
videoTracks 


volume 


jü 述 





设置 或 返回 音频 /视频 是 否 暂 停 

设置 或 返回 音频 /视频 播放 的 速度 
返回 表示 音频 /视频 已 播放 部 分 的 TimeRanges 对 象 
置 或 返回 音频 /视频 是 否 应 该 在 页 面 加 载 后 进行 加 载 
返回 音频 /视频 当前 的 就 绪 状 态 

回 表 示 音 频 /视频 可 寻 址 部 分 的 TimeRanges 对 象 
返回 用 户 是 否 正 在 音频 /视频 中 进行 查找 

设置 或 返回 音频 /视频 元 素 的 当前 来 源 

返回 表示 当前 时 间 偏 移 的 Date XJ 25 

返回 表示 可 用 文本 轨道 的 TextTrackList 对 象 

返回 表示 可 用 视频 轨道 的 VideoTrackList 对 象 


设置 或 返回 音频 /视频 的 音量 














KR 





i 








y 


ii 





[s 











HTMLS Audio/Video 事件 如 表 8-6 所 示 。 


事 dm 
abort 
canplay 
canplaythrough 
durationchange 
emptIEd 
ended 
error 
loadeddata 
loadedmetadata 
loadstart 
pause 
play 
playing 
progress 
ratechange 
seeked 


seeking 


表 8-6 


当 音 频 /视频 的 加 载 已 放弃 时 

当 浏 览 器 可 以 播放 音频 /视频 时 

当 浏 览 器 可 在 不 因 绥 冲 而 停顿 的 情况 下 进行 播放 时 
当 音 频 /视频 的 时 长 已 更 改 时 

当 目 前 的 播放 列表 为 空 时 

当 目 前 的 播放 列表 已 结束 时 

当 在 音频 /视频 加 载 期 间 发 生 错误 时 

当 浏 览 器 已 加 载 音频 /视频 的 当前 帧 时 

当 浏 览 器 已 加 载 音 频 /视频 的 元 数据 时 

当 浏 览 器 开始 查找 音频 /视频 时 

当 首 频 /视频 已 暂停 时 

当 音 频 /视频 已 开始 或 不 再 暂停 时 

当 音 频 /视频 在 已 因 绥 冲 而 暂停 或 停止 后 已 就 绪 时 
当 浏 览 器 正在 下 载 首 频 /视频 时 

当 音 频 /视频 的 播放 速度 已 更 改 时 

当 用 户 已 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 
当 用 户 开 始 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 




















5 tik A LEME 


CE) 


131 








实战 宝典 
(BE) 

属 性 Hi x 

stalled 当 浏 览 喜 和 尝试 获取 媒体 数据 ， 但 数据 不 可 用 时 

suspend 当 浏 览 器 刻意 不 获取 媒体 数据 时 

timeupdate 当 目 前 的 播放 位 置 已 更 改 时 
volumechange 当 音 量 已 更 改 时 

waiting 当 视 频 由 于 需要 绥 冲 下 一 帧 而 集 止 





8.4 ”播放 器 实战 


由 于 各 大 浏览 费 在 对 HTML5 na ele 革 开 ， 因 此 为 了 有 更 好 的 兼容 性 ， 般 
要 进行 定制 开发 ， 这 样 才 能 若 顾 各 类 的 浏览 

结合 本 革 前 三 市 的 知识 ， 下 面 我 们 利用 HH HTMLS 多 尹 体 给 我 们 提供 的 API 可 以 实现 目 定 
义 视 频 播放 强 效 末 。 代 人 码 消音 如下。 

HTMLS: 








<1 DOCTYPE ntml> 

«html lang="en"> 

<head> 

<meta charset-"UTF-8"» 
<title>Video</title> 

<link rel="stylesheet" href="CSS/video.CSS"> 
<ec I e sre 75, nUPiseceenenSe =. serie 
SC I Ee VI deos esc gp 
</head> 

<body- 

<div class="videos"> 

«video src="trailer.mp4 ">i Ay Wl pias xd Video, WIA MI Has. </video> 
<!-- Video 控制 控件 开始 -=-> 

<div es 
ee 
<divwelass—' Progress > 

<div class="load-progress"></div> 

<div class="now-progress"></div> 

<j Clue 

we 

<div class="time"> 

<span class='now'>00:00</span> 

Gee |G > 

<span class='dur'>00:00</span> 

< le 

«div class="volume"> 


<span Class—'vollcon “eonfont’ > </span> 
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% RUN A EXER 
<div Glass—'volbox’> 
<div class— vVobinner’ ></ diy > 
xU alice 
</div> 
<div class="fullscreen iconfont"> </div> 
e an 
OU 
<!-- Video 控制 控件 开始 --> 
二 
ii 
<<) Gale 
pod 
<<) lane = 


JavaScript: 


window. onload=function() { 
// 获 取 视频 对 象 
var vObj-document.getElementsByClassName('videos')[0].getElementsByTag 





Name ('video') [0]; 
vObj .controls=false; // ay Brett 
// 获 取 play 按钮 
var playbtn-document.getElementsByClassName('play') [0]; 


// 获 取 n ts 


var load=document.getElementsByClassName('loading"') [0]; 

// 获 取 进度 条 

var progress-document.getElementsByClassName ("progress") [0]; 

var nowProgress-document.getElementsByClassName ("now-progress") [0]; 
var loadProgress=document.getKlementsByClassName('load-progress') [0]; 


PROGEeS>S onmouseover Tuomiom( 4 
progress.style.height='8px'; 
OuOOR ess Eee =! 9» t 

} 
progress.onmouseout-function() | 
progress.style.height='5px'; 
Progress. style. Lop—'-=5opx > 

} 

// 单 击 窗 体 单 击 播放 按钮 开始 播放 暂 集 
ORGOnei en 和 ET 
in ,Obm paused) | 

vob 人 

}else{ 

vObj.pause(); 

} 

} 

/ /检测 播 放 暂停 

WO ne () 
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HTML5 
/ /更改 播放 按钮 样式 播放 状态 
playotene InmnerHiM "> 
/ /视频 缓冲 
VODIJ- -Onprogress—Lunction (){ 
eon ole log etsium edem 
var scale-vObj.buffered.end(0)/vObj.duration; 
loadProgress.style.width-scale*100-'$'; 
VODs Ona en Fre om 


load.style.display='block'; 


vVOb] -onplaying=runceion( ) { 
load.style.display='none'; 
vObq suopte ues 


// 暂 俘 事 件 触 发 更 改 播放 按钮 样式 暂停 状态 

VODI Onause Fun eon) 

playbtn.innerHTML=' '; 

} 

0 time Zi 

var nowT-document.getElementsByClassName ('now') [0]; //?A BU BN JR]ERS 
var dur-document.getElementsByClassName('dur') [0]; //##2NI AS 


vObj .onloadedmetadata=function() { 

hunc qs HSBIMIE S Ssmo Io duration), 

// console.log(vObj.buffered.end(0)); 

var scale-vObj.buffered.end(0)/vObj.duration; 
loadProgress.style.width=scale*100+'S'; 

j 

// 播 放 时 间 改 变 “” 修改 当前 播放 时 间 修改 进度 条 
vObj.ontimeupdate-function()í 

now. innerkIM =setTime(vObJ].Currentlime); 
var scale-vObj.currentTime/vObj.duration; 
nowProgress.style.width=scale*100+'S'; 


} 


// 单 击 进度 条 ” 跳 转 到 指定 时 间 
progress.onclick=function (e) { 

var ev=window.event | |e; 

var x-ev.offsetX|lev.layerX; 

var progressW-progress.offsetWidth; 
vObj.currentTime-x/progressW*vObj.duration; 
} 

progress.onmousedown=function (e) { 


Var ev=window.event| |e; 


134 


2e RUNS — — = XE SCA BET E 
var x-ev.offsetX|lev.layerX; 
var progressW-progress.offsetWidth;; 
document.onmousemove-function (e) { 
var ev=window.event| |e; 
if (ev.preventDefault ) 
ev.preventDefault(); // 阻 止 默认 浏览 器 动作 (W3C) 
else 
ev.returnValue = false;//IE PIERRE 
var x-ev.offsetX|lev.layerX; 
nowProgress.style.width-x/progressW*100-s'2'; 
vObj.currentTime-x/progressW*vObj.duration; 
} 
document onmouseue=itunect Tom(yl 
document.onmousemove-null; 
document.onmouseup-null; 
} 
j 
/ /设置 时 间 格 式 
function setTime (time) { 
nens ee RN beside EN (tame, a 8) 
var uec reuse Meus ve loot (time 45000) C0 


var s-setZzero(Math.floor(times$060));: 


if (h<=0) { 
return mt': es, 
}else{ 


return lnt” tai tS 
| 

} 

// 时 间 <=9 4E 
function setZero (num) { 
if (num<=9) { 

Pe TOTAU, 
telse{ 

return ""+numy 

} 

} 


/ /播放 器 EPEE 

var fullBtn=document .getElementsByClassName('fullscreen') [0]; 
var outBox=document.getKElementsByClassName ('videos"') [0]; 
//fullscreen.js 中 的 函数 全 屏 事件 

tullisecreenchange(runcrvon n) 

if(!fullstate()){ 

/ NEREDE 

CULB 5 se y le m een s 

outBox.style.height=''; 
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HTML5 


EN 5-5 


fullBtn.innerHTML-' '; 
Jjelse( 
/ / BF 
fullBtn.innerHTML-' '; 


outBox.style.width-document.documentElement.clIEntWidth-*'px'; 
outBox.style.height=window.screen.height+'px'; 
} 

j); 

// 单 击 全 屏 投 钮 全 屏 退出 全 屏 

FOULLIBEn onclick- funcion) 
if(!fullstate())(//fullscreen.js BEGIN 
fullscreen (outBox);//4tBf 

}else{ 

exittullscreen() ET 

} 

} 

// 播 放 顺 音量 


var volicon-document.getElementsByClassName('volicon')[0]; 
var volbox=document.getHElementsByClassName('volbox') [0]; 
var volinner-document.getElementsByClassName('volinner')[0]; 


var nowVol=1; 
/ /获取 单 击 位 置 


yolbox. One LLek-EUMer lem SS A 





var ev=window.event | |e; 

var x-ev.offsetX|lev.layerX; 
voObysvolume-x/wvolboxsoftsetwWidbths 
| 

// 单 击 音量 按钮 静音 还 原 

pedore me oe diee es ne lon) 

Tt (vob volume 0)! 
nowVol-vObj.volume; 
vObj.volume-20; 

Jjelse( 

vObj.volume-nowVol; 

} 

} 

// 监 测 音量 变化 
vObj.onvolumechange-function()í 
// 计 算 首 量 进度 条 
volinner.style.width=vO0Obj.volume*100+'S'; 
// 根 据 音 量 值 动态 改变 音量 图 标 

if (vObj .volume==0) { 








VOIRON v iblahatsce 2I S i. 
telse 1f (vObDJ]. volume- 0. 5) 
VOLI1ICONn. LINimernMs! E. 


telse if(vObj.volume«0.5&&vObj.volume!-0)[( 
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% RUN A EXER 
VoleconennnerMnE eet 
} 
j 
// Xi ANE XCE 
noTexrt (Volicon) s 
noText (playbtn); 
TUNC Xo more: Coo) 
oDi- onseleclotart funci tone) | 
var ev=window.event| |e; 
if (ev.preventDefault ) 
ev.preventDefault(); 
else 


ev.returnValue - false; 


— 0 





Jg EUR AU] 8-8 所 示 。 
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移动 端 触 撞 事 件 


9.1 移动 端 事件 模型 





9.1.1 我 们 熟知 的 事件 模型 


1996 Œ, Netscape (Px) 公司 引入 了 鼠标 事件 和 车 名 的 鼠标 巧 停 事 件 ， 使 得 Web JT 
者 能 够 在 PC 闯 开 发 出 可 交互 的 网 站 。 随 后 义 引 入 了 键盘 事件 ， 能 够 让 我 们 在 网 页 中 监控 到 
用 户 的 输入 动作 。 这 两 种 事件 在 PC 站 统治 了 长 达 15 年 ， 直 到 ioOS 系统 的 出 现 ， 它 既 没 有 很 
标 也 没有 键盘 ， 所 以 在 为 移动 Safari 浏览 右 开 发 交互 网 页 时 ， 第 规 的 鼠标 和 键盘 事件 根本 无 
法 使 用 ， 于 是 有 了 第 三 种 事件 一 MÀBBfR. BÉ Android 中 的 WebKit 的 加 入 ， 很 多 这 样 的 
所 有 事件 已 变 成 了 事实 标准 。 


9.1.2 ”触摸 事件 有 何不 同 
触摸 事件 乍 一 看 好 像 和 鼠标 事件 没什么 不 同 。 我 们 想当然 地 认为 mousedown 等 于 


touchstart, mousemove 等 于 touchmove，moveseup 等 于 touchup。 那 么 如 下 代码 的 运行 结果 和 
您 想 得 是 否 一 致 呢 ? 























function touchEvent (event) { 
Switch (event. Cypel) 4 

Cases EOvuehstack = 
comsole log ("touchstart™) p 
break; 

case "touchend": 
console, logit touchend™); 
break; 

case "touchmove": 
console. log(“touchmove™) s 


break; 


} 
function mouseEvent (event) 
switch event tpe 
case "mousedown": 
console.log("mousedown"); 
break; 
case "mousemove": 
console.log("mousemove"); 
break; 
case "mouseup": 
console.log("mouseup"); 


break; 
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HTML5 


clocumenmbeacidbwemnehsspemner(t':osucusctdrP' o oucLhBhwemnt talse): 


documenrt.addEwventhrssrener("rtouchend'"* "touchbvent. talse) s 


cCocument vaddhventhtsrener (“rouchmove |) touchivent, false): 


( 
( 
( 
document.addEventListener("mousedown", mouseEvent, false); 
document .addeEventListener (mouseup, mousekvent, false); 

( 


document .addEventListener 


触摸 事件 运行 的 结 朱 为 : 
在 Chrome 的 控制 台中 切换 到 device PSL, WAT LRU AEF, ONES 9-1 所 示 。 


"mousemove", mouseEvent, false); 





[x à i Elements Console Sources Network 
© Ww top v Preserve log 
touchstart 
touchmove 
touchend 
» 
图 9-1 


PARE EIS TR, Un 9-2 所 示 。 


[x à | Elements Console Sources Network 


i Y top v Preserve log 


injectScript startLiveReload init 





mousemove 

mousedown 
mousemove 

mouseup 


图 9-2 


我 们 已 经 看 到 两 种 事件 输出 了 不 同 的 结果 ， 那 么 我 们 可 以 通过 这 些 结果 得 到 什么 结论 呢 ? 

(1) 触摸 事件 是 不 连续 的 ， 而 鼠标 事件 是 连续 的 。 所 以 当 我 们 触发 触摸 的 事件 的 时 候 ， 
只 有 当 用 户 真 正 触 摸 到 屏幕 ， 移 动 ， 直 到 用 户 的 手指 离开 屏幕 ， 才 会 依次 触发 touchstart- 
touchmove-touchend。 而 当 用 户 将 鼠标 指针 从 元 素 A BaP CR B 时 ， 展 标 移 动 是 连续 的 还 
意味 独 你 可 以 通过 脚本 进行 监控 。 所 以 知道 当 我 的 鼠标 移入 窗口 总 是 先 触 发 mousemove， 当 
我 鼠标 按 下 并 且 和 移动， 最 终 抬 起 的 时 候 ， 才 会 依次 触发 mousedown-mousemove-mouseup. fh 
摸 操 作 束 不 同 了 ， 用 户 可 以 放 开 元 素 A， 抬 起 手下 接 去 倍 元 素 B。 

(2) 事件 的 动作 序列 不 同 。 很 显然 ， 触 措 动 作 序列 是 touchstart-touchmove-touchend， 而 
鼠标 序列 则 是 mousemove-mousedown-mouseup。 这 个 区 别 很 重要 ， 如 果 一 个 元 素 同时 添加 这 
三 个 事件 ， 那 么 在 移动 端 总 是 touchstart EAR, TE PC 9m ise mousemove 先 触 发 。 

(3) 事件 反映 的 意图 不 同 。 当 鼠标 指针 移入 某 个 元 素 ， 或 者 用 户 投下 某 个 鼠标 按键 时 ， 
系统 可 以 立即 判断 出 应 该 触发 哪个 事件 。 而 对 于 触摸 操作 来 说 就 不 同 了 ， 人 触摸 操作 可 以 引出 
不 同 的 动作 : 在 你 的 手指 触 碰 屏幕 的 瞬间 ， 系 统 还 无 法 判断 出 你 的 意图 。 所 以 在 这 个 方面 来 
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说 ， 触 挽 事 件 更 复兴 。 

(4) 事实 上 还 有 一 点 不 同 ， 虽 然 通 过 以 上 案例 很 难看 出 ， 但 通过 我 们 的 经 验 能 够 总 结 出 
来 。 鼠 标 指针 总 是 指 关 某 一 个 像素 ， 而 手指 触摸 会 窗 诲 很 多 像素 点 。 通 常 ， 系 统 会 从 这 些 像 
素 点 计算 出 一 个 中 心 点 作为 触摸 事件 的 坐标 ， 并 且 在 touchstart 和 touchend 之 间 给 手指 移动 
留 有 余地 《人 否则 的 话 总 是 会 触发 touchmove)。 


9.1.3 触摸 事件 的 发 展 趋势 


随 看 智能 手机 平台 的 发 展 ， 移 动 应 用 越 来 越 丰 富 ， 用 户 体 验 要 求 也 越 来 越 蜗 。 移 动 平台 
捕获 用 户 的 消息 主要 分 为 按键 、 触 摸 屏 和 轨迹 球 三 种 类 型 。 现 阶段 ， 触 摸 啊 应 是 主流 趋势 ， 
对 于 触摸 事件 未 来 的 发 展 方向 是 值得 我 们 期 符 和 探索 的 。 

CIO 触摸 事件 因为 手指 直接 和 设备 接触 所 以 比 鼠 标 事 件 携 种 更 多 的 信息 。 触 摸 屏 可 以 探 
测 用 户 手 指 的 温度 ， 检 测 触摸 域 的 半径 或 者 四 触摸 的 压力 值 ， 这 些 属 性 的 实现 能 让 我 们 做 更 
多 的 事情 。 在 IE 的 指针 事件 中 ， 己 经 预 留 了 一 些 对 应 的 属性 。 

(2) 触 挽 事件 和 局 标 事件 的 合并 。 从 操作 逻辑 上 来 说 ， 这 两 种 事件 几乎 一 发。 微软 提供 
了 指针 事件 来 兼容 这 两 个 事件 ，pointerdown-pointermove-pointerup， 然 后 通过 事件 对 象 来 判 
Wiehe Sid eta eT F. Mozilla 和 Google 正在 考 外 实现 指针 事件 (PointerEvent)。 所 
以 未 来 情况 可 能 还 会 发 生变 化 。 

(3) 我 们 以 上 讨论 的 触 换 事件 仪 限于 单 指 触 换 ， 当 前 多 指 触 控 在 浏览 项 文 持 得 并 不 是 太 
ke. (Az, Safari 浏览 器 在 iOS 上 还 实现 了 gesturestart, gesturechange 和 gestureend 事件 ，IE 
浏览 器 也 有 一 组 类 似 的 事件 。 如 果 多 指 触 控 能 实现 的 更 好 ， 那 么 HTMLS RERE IV EFF Ai 
更 多 的 交互 和 操作 人 逻辑 。 















































9.2 移动 端 事件 详解 








HTMLS 中 新 添加 了 很 多 交互 事件 ， 包 括 上 一 节 中 提 到 的 触摸 、 手 势 、 指 针 事 件 等 ， 但 
是 由 于 其 兼容 问题 不 是 很 理想 ， 应 用 实战 性 不 是 太 强 ， 所 以 本 书 只 分 享 应 用 广泛 、 莱 容 性 好 
的 事件 ， 主 要 讨论 的 触摸 事件 包括 : touchstart、touchmove、touchend 以 及 touchcancel。 


9.2.1 事件 


上 一 节 中 ， 我 们 已 经 用 到 了 以 下 的 一 些 事件 ， 现 在 来 进行 深入 的 了 解 。 

touchstart 事件 : 当 手 指 触 摸 屏 幕 时 候 触 发 ， 即 使 已 经 有 一 个 手指 放 在 屏幕 上 也 会 触发 。 

touchmove 事件 : 当 手 指 在 屏幕 上 请 动 的 时 候 连 续 地 和 触发。 在 这 个 事件 发 生 期 间 ， 调 用 
preventDefault() 事件 可 以 阻止 滚动 。 

touchend 事件 当 手 指 从 屏幕 上 离开 的 时 候 触发 。 

touchcancel FAF: 当 系 统 停 止 跟踪 触摸 的 时 候 触发 。 关 于 这 个 事件 的 确切 触发 时 间 ， 文 
档 中 并 没有 有 具体 说 明 ， 需 要 根据 经 验 去 猜测 。 
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HTML5 


EN 实战 宝典 
9.2.2 事件 对 象 数组 


正如 所 预想 的 一 样 ， 我 们 可 以 同时 用 很 多 手指 触摸 屏幕 ， 所 以 在 事件 对 象 里 提供 了 相应 
的 数组 来 存储 每 个 手指 的 信息 。 

touches: 表示 当前 跟踪 的 触 措 操 作 的 touch 对 象 的 数组 。 

targetTouches: 特定 于 事件 目标 的 touch 对 象 的 数组 。 

changeTouches: #78 H EV AMELIA STARE touch 对 象 的 数组 。 

每 个 touch 对 象 包含 的 属性 将 在 下 一 和 中 进行 介绍 。 


9.2.3 ”事件 对 象 属性 


每 个 手指 包含 有 以 下 的 信息 。 

clientX: 触摸 目标 在 视 口 中 的 x AA S. 

clientY: 触 措 目标 在 视 口中 的 y fA Py o 

identifier: 标识 触摸 的 唯一 ID。 

pageX: 触 探 目标 在 页面 中 的 x FAK pn o 

pageY: 触 探 目标 在 负面 中 的 y HAA pn 

screenX: 触摸 目标 在 屏幕 中 的 x S. 

screenY: 触摸 目标 在 屏幕 中 的 y SA. 

target: 触目 的 DOM "He Hn. 

是 时 候 该 试 试 这 些 事件 和 属性 了 ， 下 面 ， 我 们 看 看 当 这 些 事件 触发 的 时 候 ， 乞 的 触发 顺 
序 、 间 隅 时 间 以 及 记录 的 信息 运行 结果 如 几 9-3 所 示 。 




































































window.onload-function() { 

var firsitEmMmi LO ime — 0; 

var eventTypeArr = [eques OUGRSLEEE |, 'touchmove', 
'touchend','mousedown', 'mousemove', 'mouseover', 'mouseup']; 


qon var En 2 le event lv engeren cien pl 
// 利 用 财 包 保存 eventType， 当 回调 函数 触发 时 会 访问 该 闭 包 的 环境 变量 对 象 


(tTuncceLom | 








var eventType = eventTypeArr[i]; 


document.addEventListener(eventType, function (e) { 


var curlime — (new Date () )2geerime ()}; 
if (firstEmitTime === 0) { 
firstEmitTime = curTime; 


) 

// 打 印 当前 事件 触发 时 间 与 第 一 个 事件 触发 时 间 的 差 值 

var log = eventType + ': '; 

var Cime Ey Eee! (cum me CERE mn 


if (e. touches==undefined) { 


var px "PREMA x: "+e.clIEntX+";"; 
var py = "RMD y:"te.clIlEntY+";"; 
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}else { 
EE = e.couches[O0]s 
it (Current) 4 
var px = "fileA x:"+current.clIEntX+";"; 


var py = "fileA y:"+current.clIEntYt+";"; 
pe Se 
var px = "触摸 位 置 x: 检 测 不 到 ;"; 


var py = "触摸 位 置 y: 检 测 不 到 ;"， 
} 

} 
Console slog (log Emme: px py); 
j); 


«c exene nor 


(x ú) Elements Console Sources Network  ,., 


© Y top v Preserve log 
touchstart: 时 间 间 隔 :0; 触 摸 位 置 x: 343.27899169921875; 
触摸 位 置 y: 102.3239974975586; 


lll AY i] (6) Ba: 6 ; 触摸 位 置 X: 检 测 不 到 ; 触摸 位 置 y :检测 不 
到 |， 


mouseover: 时 间 间 隔 ;301; 鼠标 位 置 X;:343 ; 鼠标 位 置 y; 102; 
mousemove: 时 间 间 隔 :301; 鼠标 位 置 Xx;:343 ; 鼠标 位 置 y;102 ; 
mousedown: 时 间 间 隔 :301; 鼠标 位 置 X:343; 鼠标 位 置 y; 102; 
mouseup: 时 间 间 隔 :302; 鼠标 位 置 x: 343; 鼠标 位 置 y: 102; 
Click: 时 间 间 隔 :303; 鼠标 位 置 x;343 ; 鼠标 位 置 y;102 ; 


图 9-3 





9.3 ALPHA 


经 过 前 面 两 市 的 阐述 ， 我 们 已 经 了 解 移动 端的 触 挽 事件 的 执行 流程 ， 以 及 会 引发 的 一 些 











问题 ， 那 么 我 们 应 该 如 何 使 用 触摸 事件 来 实现 各 种 功能 呢 ? 如 果 我 们 用 原生 的 事件 来 做 的 
话 ， 会 引发 很 多 问题 ， 并 且 在 PC 端 并 不 能 够 检测 到 触 换 事件 ， 所 以 我 们 需要 将 原生 的 事件 
封 狼 ， 并 有 旦 解决 兼容 性 以 及 可 能 引发 的 一 系列 问题 。 焉 好 有 很 多 现成 的 插件 可 用 ， 比 方 说 百 
度 官 方 提供 的 touchjs 库 ， 我 们 要 实现 的 轮 播 图 的 案例 ， 就 可 以 采用 touchjs 库 来 完成 。 在 官 
方 网 站 有 详细 的 文档 说 明 ， 网 址 为 http://allcky.github.io/touchjs。 

虽然 百度 官方 文档 有 详尽 的 说 明 ， 但 我 们 还 是 有 必要 对 即将 用 到 的 一 些 事件 和 属性 做 一 
些 说 明 。 
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EN 5-5 


9.3.1. 添加 事件 语法 


A Ph: 


EOUCKZ On ( target", 


("you have done", 


9.3.2 文 拉 的 事件 


ev.type); }); 


红色 标注 的 古 我 们 要 用 到 的 事件 ， 见 表 9-1. 


旋转 


请 动 


拖 动 开始 
拖 动 
拖 动 结束 
拖 动 


TR 


por 
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Xx 9-1 
数 


\ 


S 


pinchstart 
pinchend 
pinch 
pinchin 
pinchout 
rotateleft 
rotateright 
rotate 
swipestart 
swiping 
swipeend 
swipeleft 
swiperight 
swipeup 
swipedown 
swipe 
dragstart 
drag 
dragend 
drag 


hold 


tap 


doubletap 


Down cd eSI eiu e EU Lom (ev) 


Hi x 
缩放 手势 起 点 
缩放 手势 终点 

缩放 手势 

收缩 
放大 

向 左旋 转 

向 右 旋转 

旋转 
滑动 手势 起 点 

滑动 中 
滑动 手势 终点 

问 左 滑动 

DEREI 

DERE 

癌 下 滑动 

滑动 

拖 动 屏幕 

拖 动 手势 

拖 动 屏 莫 

拖 动 手势 

长 按 屏 幕 

单 击 屏 幕 

Nacht BERE 


console: Log 
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9.3.3 ”事件 对 象 属性 


K 9-2 列 出 了 所 有 的 时 间 对 象 属 性 ， 可 以 使 我 们 获得 事件 触发 时 的 详细 信息 。 





表 9-2 事件 对 象 











BR 性 fii — X 
originEvent 触发 某 事 件 的 原生 对 象 
type 事件 的 名 称 
rotation 旋转 角度 
scale 缩放 比例 
direction 操作 的 方 回 属性 
fingersCount 操作 的 手势 数量 
position 相关 位 置信 息 , 不 同 的 操作 产生 不 同 的 位 置信 息 
distance swipe 类 两 点 之 间 的 位 移 
distanceX, x 手势 事件 x 方 同 的 位 移 值 ， 向 左 移动 时 为 负数 
distanceY, y 手势 事件 y 方 加 的 位 移 值 , 同上 移动 时 为 负数 
angle rotate 事件 触发 时 旋转 的 角度 
duration touchstart 与 touchend 之 间 的 时 间 戳 
factor swipe 事件 加 速度 因子 
startRotate 局 动 单 指 旋转 方法 ， 在 东 个 元 素 的 touchstart 触发 时 调用 





现在 开始 介绍 我 们 的 案例 : 
1. 首先 引入 touch.js 
可 以 引用 官方 提供 的 cdn 地 址 ， 也 可 以 下 载 到 本 地 。 


Sor TO Te /COde woe OuUNCcoOm, EO 0 A 








2. 布局 页 面 


// 外 层 的 容器 当做 观察 的 窗口 
solved eassciibanneqdt 

/ / E] box YEA HBR A RICE 
alan Class DO 

// 我 们 将 图 上 作为 背景 放 到 a 标签 中 

<a href="#"> 
€ Bo 
«a href="#"> 
«UB 
«c oi 
t labs 








145 


HTML5 
EN 实战 宝典 


3. 添加 CSS 样式， 使 页 面 易于 观察 


.bannert 

widi: 100 herome:. 0 posltlon: dore eub Deep 
bert: 0 EO 

} 

.boxt 

width: 00 meine 0 margin Tee 101 

} 

Moo E 

Fost lert; wn 0 nenaome 100. 


} 

90x er ne eh db eb JE | 

ein me nn 0 nm mn no-repeat 
center 10px; 

baekareoumed Sal we c oS 

} 

-0x mthi (2) 4 

Background puede (o in ee Ib: eei ge a esi a «2 «5 916p) RO= 
repeat center center; 

Dackground ce cue) - 


} 
4. 添加 逻辑 代码 


var current;// 初始 化 当前 位 置 的 变量 

var num=0;// 4J484.-48j E HR Ft 

// 诬 加 开始 拖 搜索 件 ， 确 定 初始 的 位 置 

iom elm om een eade amt S TOUGH NO I 
S(O Ole) ees ce 

transition: “monet 

}) 
cürrent-parselnt (o(" {box ess time guise t 
j) 

// 添 加 拖 搜索 件 ， 实 时 监测 图 户 的 位 置 和 方 回 
EU De ga funnel on (Ge 

S (W box“) el 

marginLeft: e.x+current 

}) 

}) 

// 洪 加 拖 搜 完成 事件 ， 确 定 最 终 拖 搜 方 同 和 完成 位 置 
Couch om oo oragesngqg runc Lione) 
// 如 果 方 向 是 左 侧 的 处 理 方式 


if (e.dinreccion——" lene”) { 














num++; 


a e t" loose a”) s Leiacrela= 1) 1 
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全 
} 
// 如 来 方 四 是 右 侧 的 处 理 方式 
relse 1f (e.directlon =" mage) 
num; 
if (num<0) { 
num-0; 
j 
} 
/ /判断 拖 搜 的 速度 和 距离 ， 来 确定 图 片 最 终 是 回 弹 还 是 到 下 一 张 
Tite. factor<4| | Math abs (2.x) 2300) { 
Su ese) aes s(t 


transition: margin ose ca ei, 








marginLelt: num L100 T 

j) 

telse{ 

Casio!) jess Ct 
eames ion. margin os Ca- e7, 
marginLeft:current 

j) 

} 


Console loo mie 


ia) 
效果 如 图 9-4 所 示 。 


WEB 前 端 工程 师 实 训 


— WaT Aa = >) | co 
DX AJ Hx ZIEL 的 前 端 工 程 师 A | me TUNE. 


优 逸 客 ， 为 梦想 步 入 高 端 互联 网 领域 的 大 学 生 ， 
提供 高 品质 的 实 训 平台 与 高 新 就 业 的 机 会 。 





图 9-4 最 终 效 果 图 
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10.1 
10.2 aa 
e : 
10.3 vasa 
10.4 ean 
oat 
x Pil] 


LER OE | 
离线 应 用 


10.1 离线 应 用 概述 


前 面 的 章节 中 我 们 曾 使 用 localStorage 把 一 些 数据 保存 到 本 地 ， 实 现 了 一 个 可 编辑 表 











格 。localStorage 搭配 HTMLS 中 提供 的 在 线 离线 事件 ， 以 及 离线 资源 (注意 ， 是 资源 ， 不 是 
数据 ) 缓存 ， 可 以 让 我 们 制作 一 些 功能 更 强大 的 应 用 。 
在 开发 文 持 离 线 的 Web 应 用 程序 时 ， 开 发 者 通常 需要 使 用 以 下 三 个 方面 的 功能 。 
e 离线 资源 缓存 : 需要 一 种 方式 来 指明 应 用 程序 离线 工作 时 所 需 的 资源 文件 。 这 样 ， 
浏览 器 才能 在 在 线 状态 时 ， 把 这 些 文件 缓存 到 本 地 。 此 后 ， 当 用 户 离 线 访问 应 用 程 
序 时 ， 这 些 资源 文件 会 自动 加 载 ， 从 而 让 用 户 正 常 使 用 。 在 HIMLS 中 ， 通 过 cache 
manifest 文件 指明 需要 绥 存 的 资源 ， 并 文 持 上 自动 和 手动 两 种 缓存 更 新 方式 。 
e 在 线 状 态 检 测 : 开发 者 需要 知道 浏览 器 是 否 在 线 ， 这 样 才 能 够 针对 在 线 或 离线 的 状 
态 ， 做 出 对 应 的 处 理 。 在 HIMLS 中 ， 提 供 了 两 种 检测 当前 网 络 是 否 在 线 的 方式 。 
e 林地 数据 存储 : 离线 时 ， 需 要 能 够 把 数据 存储 到 本 地 ， 以 便 在 线 时 间 步 到 服务 器 
上 。 为 了 满足 不 同 的 存储 需求 ，HIMLS 提供 了 DOM Storage 和 Web SQL Database 
两 种 存储 机 制 。 前 者 提供 了 易 用 的 key/value 对 存储 方式 ， 而 后 者 提供 了 基本 的 关系 
数据 库存 储 功能 。 





























10.2 ”离线 资源 缓存 





为 了 能 够 让 用 户 在 离线 状态 下 继续 访问 Web 应用， 开发 者 需要 提供 一 个 cache manifest 
文件 。 这 个 文件 中 列 出 了 所 有 需要 在 离线 状态 下 使 用 的 资源 ， 浏 览 右 会 把 这 些 资源 缓存 到 本 
地 。 本 节 先 通过 一 个 例子 展示 cache manifest 文件 的 用 途 ， 然 后 详细 摘 述 其 书写 方法 ， 最 后 
说 明 绥 存 的 更 新 方式 。 

cache manifest 示例 : 

我 们 通过 W3C 提供 的 示例 来 说 明 cache manifest 文件 的 用 法 。Clock Web 应 用 由 三 个 文 
件 “clock.html”“clock.css” 和 “clock.js” 组 成 。 

Clock 应 用 代码 : 

ek e DOC YE em Nem head. 


<title>Clock</title> 
SR 




















<link rel="stylesheet" href="clock.css"></head><body> 
Te Im ouu er © lock omi 54 91999255. em 
<style>output { font: 2em sans-serif; }</style> 


—S Crip 
setTimeout (function () { 
document.getElementById('clock').value = new Date (); 


PA OOO SCEE 


当 用 户 在 离线 状态 下 访问 “clock.html” 时 ， 页 面 将 无 法 展现 。 为 了 文 持 离线 访问 ， 开 
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HTML5 
ks 
发 者 必须 添加 cache manifest 文件 ， pectin 的 资源 。 这 个 例子 中 的 cache manifest 文件 


为 “clockmanifest”， 它 声明 了 3 个 需要 缓存 的 资源 文件 “clockhtml”“clockcss ”和 
“clock.js”. 


clock.manifest 代码 ; 











CACHE MANIFEST 
Glock nem: 
Gerd eras 


Clock S 


添加 了 cache manifest 文件 后 ， 还 需要 修改 “clock.html”， 把 <html> 标签 的 manifest 属 
性 设置 为 “clock.manifest”。 修改 后 的 “clock.html” 代 人 如 下 : 


<l- ‘Clock mm ><IDOCTYPE html -html manifesi="clock.manifest"=hcead 
itle nC lock ele 

eeo o lok s cub 

<link rel="stylesheet" href="clock.css"></head><body> 

<p ihe bine te: Oued Clock /ou ue /< oo < /erm 





修改 后 ， 当 用 户 在 线 访 问 “clock.html” 了 时， 浏览 器 会 缓存 “clock.html”“clock.css ”和 
“clock.js” 文 件 ， 而 当 用 户 离 线 访 问 时 ， 这 个 Web 应 用 也 可 以 正常 使 用 了 。 

下 面 说 明 书 写 cache manifest 文件 需要 避 循 的 格式 。 

e 首 行 必 须 是 CACHE MANIFEST. 

e 之 后 ， 每 一 行列 出 一 个 需要 缓存 的 资源 文件 名 。 

e 可 根据 需要 列 出 在 线 访问 的 白 名 单 。 折 名单 中 的 所 有 资源 不 会 被 缓存 ， 在 使 用 时 将 
直接 在 线 访问 。 声 明白 名单 使 用 NETWORK: 标识 符 。 

e 如 果 在 日 名 蛙 后 还 要 补充 需要 缕 存 的 资源 ， 可 以 使 用 CACHE: 标识 符 。 

e 如 果 要 声明 某 URI 不 能 访问 时 的 替补 URI， 可 以 使 用 FALLBACK: 标识 符 。 其 后 
的 每 一 行 包 含 两 个 URI， 当 第 一 个 URI 不 可 访问 时 ， 浏 览 费 将 尝试 使 用 第 二 个 
URI. 

e 注释 要 另 起 一 行 ， 以 # 号 开头 。 

cache manifest 示例 : 





























CACHE MANIFEST 

# 卡 一 行 是 必须 书号 的 。 
images/sound-icon.png 
images/background.png 

NETWORK: “comm eo 

CACHE: style/default.css 

FALLBACK: /files/projects /projects 


更 新 缓存 : 
应 用 程序 可 以 等 符 浏 览 右 目 动 更 新 缓存 ， 也 可 以 使 用 Javascript 接口 手动 触发 更 新 。 
e 目 动 更 新 
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离线 应 用 
浏览 器 除了 在 第 一 次 访问 Web 应 用 时 绥 存 资源 外 ， 只 会 在 cache manifest 文件 本 身 发 生 
变化 时 更 新 缓存 ， 而 cache manifest 中 的 资源 文件 发 生变 化 并 不 会 触发 更 新 。 
e 于 动 更 新 
我 们 也 可 以 使 用 window.ApplicationCache 的 接口 更 新 缓存 。 方 法 是 检测 window. 
ApplicationCache.status 的 值 ， 如 果 是 UPDATITEREADY ， 那 么 可 以 调用 window.Application 
Cache.update() V rZ Fs IRA RAU Ph. 
if (window.ApplicationCache.status == window.ApplicationCache.UPDATEREADY) { 


window.ApplicationCache.update(); 


} 


10.3 ”在线 状态 检测 


如 果 Web 应 用 程序 仅仅 是 一 些 静 态 页 面 的 组 合 ， 那 么 通过 cache manifest 绥 存 资源 文件 








以 后 ， 束 可 以 文 持 离线 访问 了 。 但 是 随 看 互联 网 的 发 展 ， 特 别 是 Web 2.0 概念 流行 以 来 ， 用 
户 提交 的 数据 渐渐 成 为 互联 网 的 主流 。 那 么 在 开发 文 持 离 线 的 Web 应 用 时 ， 怠 不 能 仅仅 满足 
于 毅 态 页 面 的 展现 ， 还 必需 考虑 如 何 让 用 户 在 离线 状态 下 也 可 以 操作 数据 。 离 线 状 态 时 ， 把 
数据 存储 在 本 地 ; 在 线 以 后 ， 再 把 数据 同步 到 服务 右上。 

为 了 做 到 这 一 点 ， 我 们 首先 必须 知道 浏览 句 是 否 在 线 。HIML35S 提供 了 两 种 检测 是 人 否 在 
线 的 方式 : navigator.onLine 和 online/offline 事件 。 

@ navigator.onLine 

navigatoronLine 属性 表示 当前 是 否 在 线 。 如 果 为 tue， 表 示 在 线 ; WRN false, KRA 
线 。 当 网 络 状态 发 生变 化 时 ，navigator.onLine 的 值 也 随 之 变化 。 开 发 者 可 以 通过 该 取 它 的 值 
获取 网 络 状 态 。 

@ online/offline 事件 

当 开 发 离线 应 用 时 ， 通 过 navigatoronLine 获取 网 络 状 态 通 音 是 不 够 的 。 开 友 者 还 需要 在 
网 络 状态 发 生变 化 时 立刻 得 到 通知 ， 因 此 HTMLS 还 提供 了 online/offline 事件 。 当 在 线 / 离 线 
TRA WJ PRAY, online/offline 事件 将 触发 在 body RE, J HÆ document.body、document 
和 window 的 顺序 冒 泡 。 因 此 ， 开 发 者 可 以 通过 监听 它们 的 online/oftline 事件 来 获悉 网 络 
状态 。 











10.4 ”离线 应 用 示例 





最 后 ， 我 们 通过 一 个 例子 来 说 明 使 用 HTMLS5 开发 离线 应 用 的 基本 方法 。 这 个 例子 会 用 
到 前 面 提 到 的 离线 资源 绥 存 、 在 线 状态 检测 和 DOM Storage 等 功能 。 假 设 我 们 开发 一 个 便签 
管理 的 Web 应 用 程序 ， 用 户 可 以 在 其 中 添加 和 删除 便签 。 它 支持 离线 功能 ， 人 允许 用 户 在 离线 
状态 下 洪 加 、 删 除 便签 ， 并 且 当 在 线 以 后 能 够 同步 到 服务 如 上 。 

这 个 程序 的 界面 很 简单 。 用 户 点 击 “New Note” 按 钮 可 以 在 弹出 框 中 创建 新 的 便签 ， 双 
TAN AE RE AEN E o 





151 


HTML5 


EN 实战 宝典 


Xii HTML fVf3: 


<html manifest="notes.manifest"><head> 

<script type-"text/Javascript" src="server.js"></script> 
<script type="text/Javascript" src="data.js"></script> 
<script kype—' bexe/ Javascript src "UI. ists scm 
<title>Note List</title></head> 

-Dody onload SvneWithoerver(y ”> 

<input type="button" value="New Note" onclick-2"newNote()"» 
«cu spoke qoa eres /ol oou acai 


1. cache manifest 文件 

xe X cache manifest 文件 ， 声 明 需 要 绥 存 的 资源 。 在 这 个 例子 中 ， 需 要 绥 存 “index.html” 
“serverjs”“data.js” 和 “UIjs”4 个 文件 。 除 了 前 面 列 出 的 “index. html” 外 ，“server.js” 
“data.js” 和 “UIjs” 分 别 包 含 服务 器 相 天 、 数 据 存 储 和 用 户 界 面 代 人 三 。 


2. cache manifest 文件 定义 














HP Z BI 


CACHE MANIFEST 
index.html 


Server, ]s 








data.js 
UT S 
用 户 界 和 面 代码 定义 在 ULjs: 
function newNote() { 
var title = window.prompt ("New Notes”); 
if (title) 
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{ 
add (ei ele): 


) 
function add(title){ 


// 在 界面 中 添加 

Bele Titem(tit Ie). 

// 在 数据 中 添加 

addbacaltem(trtie) 
} 


function remove (title) { 


// 从 界面 中 删除 
removeUIItLem (title) ; 
// 从 数据 中 删除 
removeDataltem(title); 


) 
function addUIItem(title)| 


离线 应 用 
Var atem = document .createblement ("li"); 
item.setAttribute("ondblclick", "remove ('"+title+"!')"); 
ute cmm cs pM tae MEUS 
var lior document getElement i len qu 
list.APPendChild(item) ; 
} 
function removeUIItem(title) { 
var liesl oooument etelementBy een epe 
| 
if (list.children[i].innerHTML == title) 
{ 
iles remove Mild ne tee hl er | 


} 


ULjs 中 的 代码 包含 添加 便签 和 删除 便签 的 界面 操作 。 

e 添加 便签 

用 户 点 击 “New Note” H, newNote 国 数 和 被 调用 。 

newNote 函数 会 弹出 对 话 框 ， 用 户 输入 新 便签 内 容 。newNote 调用 add 函数 。 

add 函数 分 别 调用 addUIItem Fill addDataltem 添加 页 面 元 素 和 数据 。addDataItem 代码 将 在 
ja f tH o 

addUlIItem 函数 在 页 面 列 表 中 添加 一 项 ， 并 指明 ondblclick 事件 的 处 理 函 数 是 remove， 使 
得 双击 操作 可 以 删除 便签 。 

e 删除 便签 

用 户 双击 未 便签 时 ， 调 用 remove 函数 。 

remove 图 数 分 别 调 用 TremoveUIItem 和 removeDataltem W KR v4 m 26 2& A BU HC 
removeDataltem 将 在 后 面 列 出 。 

removeUIItem PK 2509] IR va rf] 71-25 FA A DY 


3. 数据 存储 代码 
数据 存储 代码 定义 在 data.js 中 。 


var Storage — window |" locallseouage |; 
function addDatalItem(title) | 
if (navigator.onLine) // TEZERA 
{ 
addServerItem(title); 
} 
else // 离线 状态 
var str = storage.getItem("toAdd"); 
if(str == null) 
{ 
str = title; 
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STE = STE TM eee 
| 
storage.setItem("toAdd", str); 


} 
function removeDatalItem(title) { 
if (navigator.onLine) // FEZEKA 
{ 
removeServerItem(title); 
} 
else // 离线 状态 
{ 
var str = storage.getItem("toRemove"); 
if(str == null) 
{ 
Sipe e misse 
| 
else 
{ 
Sa 
} 


SCO cc es Ser Leen eb Sue 


| 
前 加 和 IE nenana= ee 
// 如 果 当 前 是 离线 状态 ， 不 需要 做 任何 处 理 


if (Navigator.onlhane == false) return; 


Wels ns 

// 和 服务 器 同步 添加 操作 

var str = storage.getItem("toAdd"); 
LE (Ste — null) 

{ 


var additems Petre el 





tor — 0. TT<adgdltems Iength lese) 
{ 

addDataltem(addlItems[i]); 
) 


Gre SVeIe 4 SMO we Tte em (t^ eol s 





// RB A s Fe D RE 


str = storage.getItem("toRemove"); 


离线 应 用 
LE (stie l= null) 
{ 
var removeltems = ot ies Ollie (aia: 
Ota (ie — ea Imo messem aide) 


{ 

removeDataltem(removeltems[i]); 
} 
SRO eC euet celere 5 


} 


// 删除 界面 中 的 所 有 便签 

var list -~ documenti egetElementBvid( lies: ).: 
while(list.lastChild != list.firstElementChild) 
list.removeChild(list.lastChild); 
if(list.firstElementChild) 

list, removeCha ld (lise  firscer lementClai la) 








// 从 服务 器 获取 全 部 便签 ， 并 显示 在 界面 中 
var alliItems = getServerItems(); 


LE (ala sense") 
{ 
var ices) ol lremen ob is 2) 
Ot eqs cms nca ees 
{ 
eem cen (meems il 


} 


rwindow.addEventListener (“onlaine”, SynmneWithoerver false); 


data.js 中 的 代码 包含 添加 便签 、 删 除 便 签 和 与 服务 器 同步 等 数据 操作 。 其 中 用 到 了 
navigator.onLine 属性 、online 事件 、DOM Storage 等 HIMLS 的 新 功能 。 

e 添加 便签 : addDataltem 

通过 navigatoronLine A Wre nE. WREE, IAH addServerltem 直接 把 数据 存 
储 到 服务 器 上 。addServerltem 将 在 后 面 列 出 ; 如 采 离 线 ， 那 么 把 数据 添加 到 localStorage 的 
“toAdd” 项 中 。 

e 删除 便签 : removeDataltem 

通过 navigatoronLine 判断 是 否 在 线 。 如 采 在 线 ， 那 么 调用 removeServerItem 直接 在 服务 
器 上 删除 数据 。removeServerltem 将 在 后 面 列 出 ， 如 采 离 线 ， 那 么 把 数据 添加 到 localStorage 
的 “toRemove” 项 中 。 

e 数据 同步 : SyncWithServer 

在 data.js 的 最 后 一 行 ， 注 册 了 window 的 online SF AE pk 2% SyncWithServer. “4 online 
事件 发 生 时 ，SyncWithServer 将 被 调用 。 其 功能 如 下 : 如 果 navigator.onLine 表示 当 六 离线 ， 
则 不 做 任何 操作 。 把 localStorage 中 “toAdd” 项 的 所 有 数据 添加 到 服务 器 上 ， 并 删除 
“toAdd ”项 。 把 localStorage 中 “toRemove” 项 的 所 有 数据 从 服务 器 中 删除 ， 并 删除 
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HTML5 
END 5-5 
“toRemove” 项 。 
e 删除 当前 页 面 列表 中 的 所 有 便签 
调用 getServerItems 从 服务 器 获取 所 有 便签 ， 并 添加 在 页 面 列表 中 。getServerItems 将 在 
后 面 列 出 。 
4. 服务 器 相关 代码 
服务 器 相关 代码 定义 在 serverjs 中 。 














Fumetron ado erverlitem(tit le 
// 在 服务 器 中 添加 一 项 

} 

function removeServerItem(title)( 
// 在 服务 器 中 删除 一 项 

| 

tumneol onv get erverltems (el 
// 返回 服务 右 中 存储 的 便签 列表 

} 











由 于 这 部 分 代码 与 服务 器 有 关 ， 这 里 只 说 明 各 个 函数 的 功能 ， 有 共 体 实现 方式 可 以 根据 不 
同 服务 器 编写 代码 。 

e 在 服务 器 中 添加 一 项 : addServerltem 

e 在 服务 器 中 删除 一 项 : removeServerItem 

e 返回 服务 器 中 存储 的 便签 列表 :，getServerItemas 
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第 11 章 


History 历史 记录 





Ak f EP RADAR 
11.1 应 用 场景 


11.2 HTMLS5 历史 记录 详解 
11.3 history 新 特性 结合 ajax 增强 单 页 面体 验 





11.1 应 用 场景 


单 页 面 应 用 ， 异 步 加 载 ， 投 需 加 载 是 我 们 在 开发 每 一 个 应 用 时 都 会 涉及 的 概念 ， 尤 其 在 
CURD 场景 中 ， 这 种 应 用 几乎 成 为 标 配 。 在 HIML4 时 代 我 们 实现 单 页 面 应 用 的 方法 有 Ajax 
和 过 ame， 这 两 种 方法 各 有 优 缺点 。 

C1) Ajax 可 以 实现 页 面 的 无 刷新 操作 ， 但 会 因为 URL 地 址 没有 改变 ， 无 法 使 用 前 进 、 
后 退 按钮 。 例 如 第 见 的 Ajax 分页， 在 第 一 页 点 击 第 二 页 的 链接 ，Ajax 分 页 完成 后 ， 浏 览 器 
地 址 栏 上 显示 的 UREL 依然 是 第 一 页 的 URL， 使 用 后 退 按钮 也 无 法 回 到 第 一 页 ， 这 种 体验 难 
免 会 对 用 户 造 成 不 便 。 

随后 机 智 的 前 问 工 程 师 们 想到 了 使 用 hash 值 在 UREL 结尾 添加 形 如 “大 xx” 的 标识 ， 然 后 
用 onhashchange 等 方式 监听 hash 值 的 变化 并 作出 相应 处 理 ， 使 得 URL 形成 历史 记录 ， 从 而 能 让 
用 户 完成 前 进 和 后 退 。 但 是 这 样 并 不 利于 搜索 引擎 的 优化 ， 而 且 得 做 大 量 的 代码 处 理 风 辑 。 

(2) 窗口 分 帧 技术 iframe， 在 一 定 程 上 度 上 也 能 解决 单 页 面 的 应 用 。 但 是 窗口 分 帧 技 
术 的 本 质 是 将 浏览 右 窗 口 分 为 多 个 窗口 ， 这 样 必 然 会 叶 八 各 个 窗口 之 间 的 通信 困难 。 而 且 这 
种 技术 对 于 搜索 引擎 也 并 不 友好 ， 所 以 我 们 经 常会 在 网 站 的 后 台 见 到 这 种 技术 ， 一 般 不 会 用 
在 前 台 页 面 当中 。 

history 对 象 从 HIML4 开始 引入 ， 有 我 们 熟悉 的 history.go0 . history.back() 和 history. 
forward() 方 法 。HTMLS5 中 增加 了 pushState 和 replaceState 两 个 方法 ， 以 及 popstate 事件 。 新 
增 的 这 些 方法 和 事件 能 够 玫 助 我 们 优雅 地 实现 单 页 面 应 用 ， 同 时 又 不 会 影响 搜索 引擎 对 我 们 
网 站 的 搜 录 。 现 在 所 有 的 浏览 右 都 已 丝 文 持 这 些 狐 的 特性 ， 并 且 涌 现 出 大 量 的 路 由 框架 ， 都 









































内 置 集成 了 这 些 狐 的 特性 。 例 如 音 名 的 angularjs 框 染 里 面 的 angular-route 等 路 由 框架 。 


11.2 HTML5 历史 记录 详解 








我 们 先 来 回顾 一 下 HTML4 的 history 对 象 给 我 们 提供 的 方法 以 及 属性 。 
1. back() 方 法 
window history. ackl(), 


使 用 back0 方 法 可 以 在 用 户 的 历史 记录 的 堆栈 中 后 退 ， 它 的 效果 相当 于 点 击 浏览 器 工具 
栏 的 后 退 投 锂 。 
2. forward() 方 法 











window. nNiotor, oT ws dq 
同样 的 ， 也 可 以 用 以 上 方法 产生 用 户 前 进行 为 。 
3. go() 方 法 


window history .ool l); 
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移动 到 历史 记录 中 特定 的 位 置 。 
用 户 可 以 使 用 go0 方 法 从 历史 中 载 入 特定 的 页 面 。 
4. length 属性 


window history length 


还 可 以 通过 检查 浏览 器 历史 记录 的 length 属性 来 找到 历史 记录 堆栈 中 的 页 面 总 数 。 

上 面 我 们 对 HTML4 里 面 的 history 对 象 做 了 回顾 ， 因 为 我 们 仍 会 用 到 这 些 属性 和 方法 。 
接 下 来 ， 我 们 要 对 histroy 里 面 的 新 特性 进行 讲解 。 

1. pushState() 

pushState() 的 作用 是 问 历史 记录 的 堆栈 中 压 入 一 条 记录 ， 该 方法 有 三 个 参数 : 

state object 一 一 一 个 对 象 ， 用 于 保存 状态 信息 ， 当 popstate 事件 被 触发 时 ，popstate 事件 
对 象 的 state 属性 会 包含 相应 的 state object 的 备份 。state object 的 容量 很 小 (Firefox 中 强制 为 
640KB )， 如 果 需 要 储存 较 大 的 数据 ， 建 议 使 用 localStorage 或 sessionStorage。 

title 一 一 被 压 入 的 历史 记录 的 页 面 的 标题 ， 该 属性 暂时 被 所 有 浏览 器 忽略 ， 实 际 开 发 时 
可 以 填 入 空 学 符 或 一 个 简短 的 标题 。 

URL 一 一 新 的 历史 记录 的 地 址 ， 可 以 是 相对 路 径 或 绝对 路 径 ， 和 在 为 相对 路 径 则 以 当前 
URL JHE. 

2. replaceState() 

replaceState() 方法 与 pushState( 方法 类 似 ， 参 数 与 pushStateO 也 相同 ， 但 replaceState0 方 法 
会 替换 当前 的 历史 记录 而 并 非 创建 新 的 记录 。 因 此 在 需要 更 新 当前 历史 记录 的 state object 
或 URL 时 ， 使 用 该 方法 会 更 加 合适 。 

3. popstate 事件 















































window. onpopstate=function () { 
console.log (changed. ) 


} 


当 用 户 在 HTML 页 耐 引 入 这 段 代 人 码 以 后 ， 束 会 发 现 这 个 事件 并 没有 触 友 ， 那 么 它 的 触 
发 时 机 是 什么 呢 ? 我 们 再 来 回顾 下 上 面 的 两 个 方法 : pushState0 和 replaceState()。 

这 两 个 方法 会 将 地 址 栏 里 面 的 URL 改变 ， 但 浏览 右 不 会 加 载 对 应 的 页 面 ， 即 使 这 个 页 
面 存 在 也 不 会 加 载 。 也 就 是 说 并 不 会 通知 浏览 器 去 加 载 狐 的 URL 地址 ， 只 是 会 将 地 址 栏 里 
AY URL 进行 更 改 从 而 形成 历史 记录 ， 其 实 是 还 是 在 本 页 面 当中 ， 接 下 来 你 就 可 以 在 页 面 
当中 进行 其 他 操作 ， 比 方 说 利用 Ajax 加 载 新 的 内 容 到 页 面 当 中 。 

但 是 在 历史 记录 当中 进行 前 进 和 后 退 的 时 候 ， 我 们 如 何 通 知 浏览 器 完成 该 做 的 事情 呢 ? 

IX IE ze popstate 这 个 事件 的 意义 所 在 ， 当 我 们 操作 前 进 和 后 退 通过 pushState() 以 及 
replaceState() 改 变 的 记录 时 ， 这 个 事件 束 触 发 了 。 当 这 个 事件 触发 的 时 候 ， 我 们 就 可 以 实现 
我 们 想 做 的 事情 ， 例 如 将 某 个 页 面 的 信息 通过 Ajax 放 在 本 页 面 当 中 。 值 得 注意 的 是 这 个 事 
件 并 不 属于 history 对 象 而 是 属于 window 对 象 。 

还 有 一 个 问题 需要 人 解决， 就 是 当 popstate 这 个 事件 发 生 的 时 候 ， 我 们 如 何 知 道 当 前 的 
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URL 处 在 哪 一 种 状态， 所 以 必定 要 有 一 个 属性 来 记录 当前 路 由 的 状态 。 
4. state 属性 








history.state 


这 个 属性 能 记录 一 坚 状 态 信息 ， 但 是 它 并 不 会 目 己 记录 ， 一 般 来 说 它 的 值 是 null， 如 末 
你 枪 让 它 有 值 的 话 ， 还 记得 前 面 的 replaceState0 方 法 与 pushState0 这 两 个 方法 吗 ? 这 两 个 方 
法 分 别 有 三 个 参数 ， 其 中 第 一 个 参数 ， 可 以 设置 一 个 对 象 〈《 目 定义 )， 在 这 个 对 和 象 里 面 保存 
ie 可 以 在 history.state 里 面 返回 ， 当 你 得 到 你 目 己 设 置 的 状态 信息 时 ， 即 可 进行 下 


























11.3 history 新 特性 结合 ajax 增强 单 页 面体 验 


前 面 两 节 已 经 将 所 需 的 知识 点 做 了 完善 的 铺垫 ， 那 么 ， 接 下 来 我 们 通过 一 个 小 案例 ， 来 
加 深 对 history 新 特性 的 理解 。 
(1) 先 在 页 面 当中 创建 3 个 按钮 : 


< oe "vom eon 
<button type="button"> F< 2«/button» 
< on type=" buLton > jan /neon 


在 浏览 器 里 面 会 出 现 如 下 样式 ， 如 图 11-71 所 示 。 


按钮 1 ”按钮 2 按钮 3 


图 11-1 
(2) 放 一 个 容器 到 HTML 页 面 中 ， 用 于 点 击 按钮 的 时 候 盛 放 不 同 的 内 容 : 


x << au 
ANS (ETE EDU. WIE CSS 样式 ， 如 图 11-2 Ata. 


fiin! ”按钮 2 ” 按钮 3 


图 11-2 
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latay = 
11% 
History 历史 记录 
<style> 
IDEA 
widih: 1 0px: height: o0 6» 
bouden o co CO 


} 
</style> 


G) 页 面 的 样式 和 结构 完成 了 ， 是 时 候 实 现 我 们 的 业务 逻辑 了 。 首 先 我 们 用 json 格式 模 
拟 一 些 数据 。 


< or igo 





var data=[ 
Cons: VOUC 
Teone es p 
(eoni a22 | 
coa 


(4) Be PRET SHE TR, AA ERAH, eds LIRE HB BLA TRI IAS, d 
H. URL 地 址 也 要 发 生变 化 。 


// 获 得 所 有 按钮 的 集合 
var btns-document.getElementsByTagName ("input"); 
// 获 得 容器 的 对 象 


var ul-document.getElementsByTagName ("ul") [0]; 








tor (vee. aco ear tm en Tt 4 
(Hume rt Wom (a) 4 
rms - oncelicks=tunccion (h) <4 
// 氮 击 按钮 的 时 候 ， 我 们 在 历史 记录 的 堆栈 里 面 ， 添 加 一 条 记录 ， 并 且 保存 当前 
/ /url 的 状态 ， 以 及 对 应 的 URL 的 变化 地 址 
er le de) fae: 
// 然后 将 模拟 数据 里 面 对 象 的 内 容 放 到 容器 里 面 


úl. innerATMi caesus ler 





acm 
} 
(5) 但 是 似乎 缺少 了 什么 步骤 。 当 我 们 进行 前 进 或 后 退 的 时 候 ， 也 需要 能 够 在 容器 里 面 
出 现 相 应 的 内 容 ， 如 何 实现 呢 ? 只 要 稍 作 添加 即 可 ! 








window. onpopstate=function () { 
// 当 历史 记录 发 生变 化 的 时 候 ， 读 到 相应 的 页 面 保存 的 状态 ， 根 据 状态 将 对 应 的 模拟 数据 写 入 到 
/ / fip 

ul.cnnercHrTMLhedatalhrstory-state.state]|-trutlie. 





} 


(60 还 有 一 个 问题 需要 解决 ， 当 我 们 和 直接 访问 URL 地 址 的 时 候 ， 容 兹 中 并 没有 出 现 相 
应 的 内 容 ， 我 们 需要 对 URL 地 址 稍 作 处 理 : 
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/ /'F& URL Shika ARE, JEBR dC T EC SU BATTU SG EE ER FP 
var hash-location.hash; 


ul.innerHTML=data[ hash.slice(-1)].title; 


运行 结果 如 图 11-3 所 示 。 


localhost:63342/w1511/aaaaa/demo.html#/0 
A 有 道 网 页 翻译 2.0 


】 技 钮 1 技 钮 2 。” 技 钮 3 
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图 11-3 





CD 最 后 ， 我 们 结合 
2d ee 

为 了 方便 起 见 ， 页 面 样式 不 会 发 生变 化 ， 但 是 我 们 要 将 模拟 的 数据 放 到 HTML 文件 里 
Hi, Æ HTML 文件 里 面 ， 包 含 不 同 的 内 容 ， 如 图 11-4 Ara. 








Ajax 实现 在 单 页 面 中 呈现 不 同 页 面 的 内 容 ， 同 时 URL 地 址 会 发 生 





i| 1.html 
il 2.html 
i) 3.html 


图 11-4 











(8) 我 们 现在 只 需要 将 取 模 拟 数据 的 地 方 改 成 用 Ajax 取 不 同 的 页 面 即 可 ， 整 体 代码 
如 下 : 


SiG p 


window.onload e unctsomel | 
var btns = document.getElementsByTagName ("button"); 
var ul = document.getElementsByTagName ("div") [0]; 
Eap ae 人 TIRE 人 lays base dit rd 
(function (1) 4 
bene li onclick = function () 4 

netorn pon tote et 0 NUS Olt ein) ie. 
// 通 过 Ajax 取 页 面 的 内 容 


ajax (i) 


je XC) 
} 
// 当 历史 记录 发 生变 化 时 , 取 对 应 的 内 容 
window.onpopstate = function () { 


ajax mex: etate S Uarte) 


162 


History 历史 记录 





163 


第 123 


TB) APP 





ABD BAIR 


12.1 Hbuilder FRR 

12.2 HBuilder Webview 详解 
12.3 新 闻 APP 页 面 制作 

12.4 ”结合 HBuilder 实现 新 闻 APP 


新 闻 APP 


12.1 HBuilder 开发 环境 











“ 工 售 善 其 事 ， 必 先 利 其 占 ”。 一 个 优秀 的 开发 环境 是 成 功 完 成 项 目 开 发 的 先决 条 件 。 
在 本 章 中 ， 我 们 用 到 的 开发 工具 是 HBuilder。HBuilder 是 DCloud (CHER) 推出 的 一 
ak x HF HTMLS 的 Web 开发 IDE《〈 集 成 开发 环境 )。“ 和 急速 ”是 HBuilder 最 大 的 优势 ， 通 过 
极其 完整 、 人 全面 的 语法 提示 ，HBuilder KA Hh Aud f F R J H EA HE Hh $2 7I 
JS HTML, CSS, JS IJF AU. "EXTUS T Xem RE EMA V AR TEX. BEF 
来 我 们 从 几 个 方面 对 HBuilder 进行 简单 的 介绍 。 








12.1.1 HBuilder 优势 


下 面 介 绍 HBuilder 有 哪些 优势 。 

1. 以 “ 快 ” 为 核心 

HBuilder 可 以 说 是 目前 Web 开发 中 最 快速 的 IDE。HBuilder 提供 了 最 全 面 的 提示 功能 3 
且 引 入 了 “快捷 键 语 法 ”的 概念 ， 很 好 地 解决 了 开发 者 记 不 住 快 捷 键 的 烦恼 。 开 发 者 只 需要 
记 住 几 条 语法 ， 残 可 轻松 快速 实现 跳 转 、 转 义 和 其 他 操作 。 比 如 《Alt+r[》 是 跳 转 到 括号 ， 
《Altt”〉 是 跳 转 到 引 写 ，《Altt 邹 母 ， 是 跳 转 六 单项 ， 而 《Altt 左 〉 则 是 跳 转 到 上 一 次 光标 位 
置 。 而 Ctrl 则 可 以 控制 操作 ， 比 如 《Ctrlitd> 就 是 删除 一 行 ， 按 下 (Ctritp〉 进 入 边 看 边 改 视 
Kl. (shift〉 键 则 是 转 义 的 作用 ， 比 如 《Shift+ 回 车 > 是 <br/>，(Shiftt+ 空 格 〉 是 &nbsp。 

2. 绿色 主题 ， 更 加 保护 健康 

黑色 主题 看 起 来 比较 酷 ， 但 是 如 果 人 有 眼 长 期 看 独 黑 色 的 界面 ， 当 要 切换 视野 看 别 的 事物 
时 ， 吏 会 产生 军 上 蚁 。 使 用 绿色 主题 更 易 让 我 们 联想 到 大 上 自然 使 我 们 的 心情 和 舒畅， 同时 使 用 绿 
色 主 题 ， 程 序 员 疫 荔 值 上 升 的 相对 缓慢， 注意 力也 更 加 的 集中 。 对 独 这 样 的 界面 号 代 但 ， 感 
觉 要 比 太 亮 或 太 瞳 的 界面 舒服 很 多 。 

3. HBuilder 的 编写 用 到 了 Java. C. Ruby 

HBuilder 团 队 是 由 一 群 了 解 多 种 编程 语言 的 极 客 组 成 的 ， 因 此 对 每 种 语言 的 优 劳 ， 都 
非常 的 清楚 ， 每 个 功能 用 哪 种 语言 更 合适 ， 就 用 哪个 语言 。HBuilder 本 身 主 体 是 基于 
Ecilpse FS, A Java 实现 的 ， 所 以 顺 其 目 然 地 兼容 了 Eclipse 平台 的 插件 。 但 因为 Java 2X 
率 低 ， 所 以 用 C 语 言 写 了 启动 器 。HBuilder 柔和 的 绿色 界面 设计 需要 动态 调节 屏幕 亮度 ， 
它 还 支持 手机 数据 线 真 机 调试 ， 而 这 些 都 是 用 C 语 言 写 的 。 最 后 ， 代 码 块 、 快 捷 配 置 命令 
脚本 ， 则 是 用 Ruby 开发 的 。 

4. 最 全 的 语法 库 和 兼容 性 数据 库 

Web 标准 的 发 展 速 上 度 是 非常 快 的 ， 各 个 浏览 器 的 扩展 语法 ， 儿 平 每 次 浏览 器 版 本 升级 ， 
都 会 产生 新 的 标签 或 语法 ， 但 是 HBuilder 都 会 以 最 快 的 速度 将 其 收录 其 中 。 
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12.1.2 用 HBuilder 开发 移动 APP 


人 简要 开发 过 程 如 下 : 

(1) HBuilder 官方 网 站 (http:/www.dcloud.io/) 下 载 HBuilder。 

(2) 新 建 一 个 手机 APP WH- 

点 击 “ 文 件 ” 一 “新 建 ” 一 “移动 APP” 或 者 直接 点 击 “ 新 建 移动 APP”。 
(3) 设置 APP 名 称 以 及 选择 相应 模板 。 

(4) 编辑 相应 的 页 面 。 

(5) 调试 。 

(6) 利用 HBuilder 进行 打包 。 











12.2 HBuilder Webview 评 解 


通过 上 一 厄 的 讲解 相信 你 已 经 对 HBuilder 这 球 编 辑 费 有 了 一 定 了 解 ， 在 我 们 正式 制作 之 
前 我 们 需要 了 解 一 下 在 本 架 例 中 主要 用 到 的 HBuilder 中 的 Webview 模块 。Webview 模块 负责 
管理 应 用 窗口 界面 ， 实 现 各 个 页 面 之 间 的 跳 转 。 当 然 在 使 用 之 前 需要 通过 plus.Webview 获取 
应 用 界面 管理 对 象 。 在 这 里 的 plus 相当 于 Javascript 中 的 window 顶层 对 象 ， 然 后 每 个 页 面 其 
实 束 是 对 应 一 个 Webview 对 象 。 每 个 Webview 有 目 己 的 运行 环境 ， 各 个 Webview 之 间 不 会 干 
扰 。 接 下 来 我 们 介绍 本 模块 中 所 用 到 的 方法 。 

一 、Webview 方法 。 


























1. 创建 新 的 Webview 窗口 
人 

说 明 : 

创建 Webview 窗口 ， 用 于 加 载 新 的 HIML 页 面 ， 可 通过 styles 设置 Webview 窗口 的 样 
式 ， 创 建 完 成 后 需要 调用 show 方法 才能 将 Webview 窗口 显示 出 来 。 

参数 : 

url: 可 选 ， 新 窗口 加 载 的 HTML 页 面 地 址 。 

新 打开 Webview 窗口 要 加 载 的 HTML 页 面 地 址 ， 可 支持 本 地 地 址 和 网 络 地 址 。 

id， 可 选 ， 新 窗口 的 唯一 标记 。 

口 标记 可 用 于 在 其 他 页 面 中 通过 getWebviewById 来 查找 指定 的 窗口 ， 为 了 保持 窗口 
标记 的 唯一 性 ， 不 要 使 用 相同 的 标记 来 创建 多 个 Webview 窗口 。 如 果 传 入 无 效 的 字符 串 则 使 
用 url 参数 作为 WebviewObject 窗口 的 id 值 。 

styles: 可 选 ， 创 建 Webview 窗口 的 样式 〈 如 窗口 宽 、 高 、 位 置 等 人 

extras: 可 选 ， 创 建 Webview 窗口 的 额外 扩展 参数 。 

值 为 JSON 类 型 ， 设 置 扩 展 参 数 后 可 以 直接 通过 Webview HA C.) 操作 符 获 取 扩 展 参 数 
属性 值 ， 如 : var w-plus.Webview.create('url. HTML, 'id', {}, {preload:"preload Webview"1); // 可 直 
接 通 过 以 下 方法 获取 preload 值 console.log(w.preload); // 输出 值 为 “preload Webview” 
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新 闻 APP 

实例 : 

var head=plus.Webview.create("head.HTML","", {},1{}); 
2. a7 Webview 窗口 

Plus. Webviewoshow( 1d, show, durarion, Callback, extras J; 
说 明 : 
显示 已 创建 或 隐 基 的 Webview 窗口 ， 并 可 指定 显示 窗口 的 动画 及 动画 持续 时 间 。 
参数 : 


id: 必 选 ， 要 显示 Webview 窗口 id 或 窗口 对 象 。 

PRIF Webview 窗口 对 象 显示 ， 则 无 任何 效 来 。 使 用 窗口 这 时 ， 则 得 拷 对 应 id 的 窗口 ， 如 
条 有 多 个 相同 这 的 窗口 则 操作 了 最 先 创 建 的 窗口 ， 帮 没有 奏 找 到 对 应 id 的 WebviewObject 对 象 ， 
则 无 任何 效果 。 

show: 可 选 ， 显 示 Webview 窗口 的 动 男方 式 。 

如 果 没 有 指定 窗口 动画 类 型 ， 则 使 用 默认 值 “auto”， 即 目 动 选 择 上 一 次 显示 窗口 的 动 
国 效 果 ， 如 果 之 前 没有 显示 过 ， 则 使 用 “none” 动 男 效 果 。 

duration: 可 选 ， 显 示 Webview 窗口 动 男 的 持续 时 间 。 

单位 为 ms， 如 宋 没 有 设置 则 使 用 默认 窗口 动 男 时 间 600ms。 

callback: 可 选 ，Webview 窗口 显示 完成 的 回调 函数 。 

当 指 定 Webview 窗口 显示 动画 执行 完毕 时 触发 回调 函数 ， 窗 口 无 动画 效果 〈 如 "none" 动 
国 效 果 ) 时 也 会 触发 此 回调 函数 。 

extras: 可 选 ， 显 示 Webview 窗口 扩展 参数 。 

可 用 于 指定 Webview 窗口 动画 是 否 使 用 图 片 加 速 。 


3. 获取 当前 窗口 的 对 象 















































C Wel ey Cobre ento CNS ore ww (Cs 


说 明 ， 获取 当前 窗口 的 对 象 。 
实例 ; 





var current=plus.Webview.currentWebview () ; 
—. WebviewObject 方法 
Webview 窗口 对 象 ， 用 于 操作 加 载 HTML 页 和 面 的 窗口 
1. 添加 事件 





obj .addEventListener (type, fn, Boolean) ; 


WH: [8] Webview f HOWIE, SRE SEPTA, CREUSE fn PISA © HY & 
次 调用 此 方法 辣 Webview 添加 多 个 监听 左 ， 当 监听 的 事件 发 生 时 ， 将 按照 添加 的 先后 顺序 
执行 。 
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参数 : 

type: 必 选 ，Webview 窗口 事件 类 型 

fn: 必 选 ， 监 听 事 件 发 生 时 执行 的 回调 函数 
Boolean: 可 选 ， 捕 获 事件 流 顺 序 

实例 : 





document. cddhvyentlhustencwa(*olusready TunecElie 下 (下 <) 


2. E Webview 窗口 中 添加 子 窗口 
obj .append (son) 


说 明 : 在 当前 的 obj 窗口 中 插入 一 个 son 子 窗口 。 
实例 : 





var current-plus.Webview.currentWebview(); 

varheader-plus.Webview.create(" www/tpl/index head.HTML", "index header 
SEDIT wt me OO nemoihies ddp Top: 0 Left 0 roots mess red) 

obj.append (header); 


3. 显示 窗口 


obI.show( type, duration, Callback, extras ),) 





说 明 : 当 调 用 plus.Webview.create 方法 创建 Webview 窗口 后 ， 需 要 调用 show 方法 才能 显 
示 ， 同 时 可 设置 窗口 显示 动画 方式 及 动画 时 间 。Webview 窗口 被 隐藏 后 也 可 调用 此 方法 来 重 
3T ALN o 

参数 : 

type: 可 选 ，Webview 窗口 显示 动画 类 型 。 

如 果 没 有 指定 窗口 动画 类 型 ， 则 使 用 默认 值 “none”， 即 无 动画 。 

duration: 可 选 ，Webview 窗口 显示 动画 持续 时 间 。 

单位 为 ms， 默 认 使 用 动画 类 型 相对 应 的 默认 时 间 。 

callback: 可 选 ，Webview 窗口 显示 完成 的 回调 函数 。 

当 指 定 Webview 窗口 显示 动画 执行 完毕 时 触发 回调 函数 ， 窗 口 无 动画 效果 时 也 会 触发 此 
回调 函数 。 

extras: 可 选 ， 显 示 Webview 窗口 扩展 参数 。 

可 用 于 指定 Webview 窗口 动画 是 否 使 用 图 片 加 速 。 

实例 : 









































ODI chow (To l Trde In Eo e E 


12.3 新闻 APP 页 面 制作 


在 乙 前 的 两 节 中 我 们 已 经 介绍 了 本 和 草 开 发 用 到 的 开发 环境 CABuilder) 和 需要 用 到 的 
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新 闻 APP 
口 界面 管理 (Webview) 模块 中 的 一 些 方法 。 本 节 ， 我 们 将 开始 进行 页 面 的 制作 。 

在 制作 页 面 之 前 我 们 先 来 提出 一 个 概念 : 多 窗口 报 术 。 它 类 似 于 我 们 HTML 中 的 帧 窗口 
技术 。 当 我 们 用 手机 访问 一 个 页 面 时 ， 由 于 各 种 原因 导致 我 们 的 页 面 无 法 快速 的 加 载 ， 这 时 
留 给 我 们 的 就 会 是 白 屏 ， 这 样 对 我 们 的 用 户 就 不 是 那么 的 友好 ， 那 么 应 该 如 何 解决 这 个 问题 
呢 ? 大 家 来 想 我 们 是 不 是 可 以 用 好 多 个 页 面 来 组 合成 一 个 页 面 呢 ? 将 一 个 页 面 拆 分 成 若干 页 
面 ， 然 后 将 其 中 的 一 些 页 面 放 在 的 APP 包 中 ， 一 些 页 面 放 在 服务 器 上 ， 这 样 再 访问 页 面 的 
话 ， 在 包 中 的 部 分 能 够 很 快速 地 加 载 出 来 ， 然 后 服务 右上 的 页 面 进行 加 载 ， 这 样 的 话 ， 页 面 
中 也 会 显示 部 分 内 容 ， 就 可 以 避免 之 前 提 到 的 那 种 情况 。 接 下 来 ， 我 们 开始 制作 新 闻 APP. 

1. 新 建新 闻 APP 

月 动 HBuilder: 

在 荣 单 栏 中 选择 “文件 ”一 “新 建 ” 一 “移动 APP” CHEE (Ctrl+N)), HIF “EAE 
移动 APP” 对 话 框 ， 在 应 用 名 称 中 输入 APP 名 称 ， 选 择 模板 “mnui 项 目 ”。 该 模板 中 包含 一 
些 文件 。 有 我 们 最 熟悉 的 index.html，css，js$，font。 另 外 我 们 还 能 够 看 见 其 他 两 个 文件 ， 
manifest.json 这 个 文件 可 以 帮助 我 们 配置 大 量 的 信息 ， 比 如 APP 的 名 称 、APPid、 版 本 号 和 
页 面 入 口 等 ;unpackage 文件 则 是 为 了 集中 管理 项 目的 相关 资源 ， 我 们 在 开发 时 可 以 放 一 下 
文件 (比如 logo， 闪 屏 页 )， 以 便 打 包 的 时 候 使 用 ， 本 质 上 和 系统 的 任何 一 个 文件 夹 没什么 
区 别 。 

2. 页 面 制作 Cindex.html) 

我 们 利用 上 面 说 到 的 多 窗口 拉 术 来 实现 ， 我 们 先 在 项 目下 面 新 建 一 个 文件 夹 tpl 来 存放 
我 们 要 用 到 的 页 面 ， 在 该 文件 夹 下 面 我 们 新 建 几 个 子 页 面 : index_head.html, index 
content.html。 在 下 面 的 布局 中 我 们 可 能 会 用 到 HBuilder 给 我 们 定义 好 的 样式 让 我 们 快速 的 实 
现 页 面 布局 。 


oe >< cree nn 
首页 头 部 布局 : 


«header class="mui-bar mul-bar-nmnav'- 





















































«a class="mui-icon-contact mui-icon mui-pull-left"»«/a» 

«hl class="mui-title">NEWAPP</h1> 

<a Class "mi Icon bars mul icon mui Pull righi 7a- 
</header> 


AR ON S| 12-1 BAAN e 
@ NEWAPP = 
图 12-1 
index content .html 


首页 内 容 的 布局 ， 此 处 是 导航 。 
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HTML5 
ENDE c5 


<div cla om. 
«a ror "EI a 
«a e R a 
<a uw Ni 
<a hrel Ta 
=) ching 


效果 如 图 12-2 所 示 。 


国内 新 闻 ”国际 新 闻 ”人 文 地 理 “社会 科学 











图 12-2 


此 处 是 一 个 轮 播 图 。 


“Chey class=" mui=slider" > 


ot elass mis edi ale Groupi- 


«div class="mui-slider-item"><a href="#"><img src="../img/2.jpg"/> 
«Uf osse Gay 
<div Class—"mui—slider—item ><a Meer—" "><img Sre—"22/1mdg/ 3 gg 
<a) Gay > 
«div class="mui-slider-item"><a href="#"><img src-"../img/4.jpg"/» 
cg Cay 
«div class="mui-slider-item"><a href="#"><img src="../img/5.jpg"/> 
xU BU Cay 
«QUU 
«i Gb 


BRUNA 12-3 所 示 。 





此 处 是 一 个 列表 。 


<ul class="mui-table-view ul"> 


<li classs"mui-table-view-cell mui-media"> 
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新 闻 APP 
<a href="Javascript:;"> 
<img class—"mui—media—-obj ect mui pull left sre—"2./img/4.j)e0q"> 
<div class="mui-media-body"> 
<p class='mui-ellipsis'> 能 和 心爱 的 人 一 起 睡觉 ， 是 件 羊 福 的 事情 ;可 是 ， 打 呼噜 怎么 











Tp? </p> 
<div 
da 
«bs 
«1-- 此 处 可 进行 复制 --> 
«mus 


效果 如 图 12-4 所 示 。 








41 幸福 
BR. 能 和 心爱 的 人 一 起 睡觉， 是 件 幸福 的 事情 ; 可 是 ， 打 呼唤 
T] <= 
BE 起 要 这 样 一 间 小 木屋 ,夏天 挫 冰 吃 瓜 ， 冬 天 转炉 取暖 
== CBD 
烤 炉 模式 的 城 ， 到 黄昏 ， 如 同 打 翻 的 调 色 盘 一 般 
图 12-4 
index sem 
日 ES Hr NEN RA 
此 处 是 一 张 带 有 进度 条 的 图 片 。 
ee mel cu mp I el el 0 tied ome: a oe 


Ol tee: Up borton: OF marci ia to /> 


接 下 来 我 们 只 需要 将 它 的 两 个 子 页 面 引 入 即 可 。 用 类 似 的 方法 我 们 同样 可 以 实现 列表 页 
(list.htmD 和 内 容 页 Cshow.html) 的 布局 。 





结合 HBuilder 实现 新 闻 APP 





12.4.1 调用 Webview 模块 


通过 前 面 的 章节 我 们 已 经 基 本 实现 了 APP 静态 页 面 的 制作 ， 本 节 我 们 将 利用 Webview 
来 实现 各 个 页 面 之 间 的 跳 转 。 在 正 陈 实现 之 前 ， 我 们 把 上 一 第 留 下 的 一 些 问题 解决 择 : 我 们 
如 何 将 写 好 的 index head.html, index content.html 插入 到 我 们 的 首页 (index.html)。 接 下 
来 ， 我 们 看 代码 部 分 。 


1. 静态 页 面 的 完 责 





ume 
第 一 步 : 我 们 执行 的 一 切 操作 必须 要 等 页 面 所 有 的 资源 加 载 完成 后 才 行 ， 所 以 我 们 先 给 
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HTML5 
EE 实战 宇内 


文档 添加 一 个 “plusready” 事 件 。 
document addeventhietener("pluUsreadyvy x Tunciion() | sc tc a) } 
第 二 步 : Mp H SE Zu RIJ index head.html 和 index content.html 插入 到 
index.html 中 , 
首先 我 们 在 index.html 中 获取 当前 窗口 的 Webview XJ 2. 





var obj-plus.Webview.currentWebview(); 


然后 我 们 创建 index head.html 页 面 对 象 。 





var header-plus.Webview.create(" www/tpl/index head.HTML","index header. 
EM al ne O0 ee ht A oD Oe 0 en on tee 


最 后 我 们 将 创建 出 来 的 头 部 窗口 插入 到 index.html 页 面 中 。 

obj.append (header); 

接 下 来 我 们 利用 相同 的 方法 将 index contenthtml 插入 到 index.html 中 ， 在 这 里 我 们 需 
要 注意 的 是 index content html 是 放 在 服务 器 上 的 ， 因 此 我 们 不 知道 该 页 面 什么 时 候 可 以 加 
载 完 成 ， 所 以 在 此 处 我 们 需要 在 页 面 未 加 载 完 成 之 前 有 一 个 提示 。 

我 们 创建 index content.html 页 面 对 象 的 代码 如 下 。 











ee Solus lr Eee ml me me 
有 


接 下 来 ， 我 们 分 别 添加 Webview 窗口 页 面 开 始 加 载 事 件 和 Webview 窗口 页 面 加 载 完成 
EM. 


content.addEventListener ("loading", function () { 
SY ne cepisse (ola enselen 
}, false) 
content.addEventListener ("loaded", function () { 
ODJ APFend (Content); 
Sime, ios dapa a" meme: 
}, false) 


用 类 似 的 方法 我 们 来 实现 列表 页 Clist-html) 和 内 容 页 Cshow.html) 的 布局 ， 到 此 为 
止 ， 我 们 才 将 所 有 的 静态 页 面 芮 正 的 布局 完毕 。 接 下 来 我 们 来 实现 页 面 乙 间 的 跳 园 。 

2. 页 面 跳 转 

有 的 读者 或 许 已 经 友 现 在 我 们 的 页 面 布局 中 ， 我 们 将 所 有 的 链接 标签 (a) 的 链接 功能 
给 屏蔽 挥 了 ， 那 我 们 如 何 实现 页 面 之 间 的 跳 转 呢 ? 在 HBuilder 的 Webview 模块 中 是 否 给 我 们 
提供 了 相应 的 方法 呢 ?” 答 案 是 肯定 的 ， 现 在 回想 一 下 我 们 是 如 何 让 index_head.html 和 
index content.html 在 首页 里 面 显示 的 呢 ? 下 面 我 们 用 同样 的 思路 来 实现 页 面 之 间 的 跳 转 : 我 
们 点 击 相应 的 链接 ， 首 先 创建 相应 的 窗口 对 象 ， 然 后 我 们 再 利用 show 方法 让 页 面 以 不 同 的 
动画 方式 出 现 即 可 。 接 下 来 我 们 看 代码 实现 。 
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新 闻 APP 
Que crece ms M 
第 一 步 : 先 给 文档 添加 一 个 “plusready” 事 件 


document.addEventListener ("plusready", function(){ ***** }) 


第 二 步 : ATE AA DY EELS PIT DY SUT, BAM OR SO DV Ge SUA, PIG 
RIE SC ETE BRE PES AS SF 


$(".top a") .click (function () { 
当 我 们 点 击 时 ， 创 建 相应 的 窗口 对 象 : 
var header-plus.Webview.create ("list.HTML",""); 
创建 出 相应 的 窗口 对 象 之 后 ， 我 们 利用 show 方法 让 页 面 以 不 同 的 动画 方式 出 现 : 


header. show("slide -in rIght"); 














}) 
PRS BAT BC PY ZEN BERT DY IGS OU TEL : 


$5 m -ul LLWY Ped c CO { 


var show=plus.Webview.create("show. HTML", "Show.HTML") ; 





show. enow("el ilide qms bt 


}) 
利用 相同 的 方法 来 实现 其 他 地 方 的 页 和 面 跳 转 功 能 。 





12.4.2. 利用 HBuilder 打包 


fe POR, PRET APP IF ARN a — AR. AJAY HBuilder 进行 APP HE. 

1. 概述 

我 们 在 将 APP 打包 之 前 需要 配置 APP 的 一 些 基 本 信息 。manifestjson 文件 是 APP 的 配置 
文件 ， 用 于 指定 应 用 名 称 、 版 本 、 图 标 、 页 面 入 口 、 启 动 图 标 及 需要 使 用 的 设备 权限 等 信息 ， 
用 户 可 通过 HBuilder 的 可 视 化 界 面 视图 或 者 源码 视图 来 配置 移动 APP 的 信息 。 

2. 应 用 基本 信息 配置 

在 HBuilder 中 创建 “移动 APP” 应 用 后 ， 都 会 在 工程 下 生成 manifest.json 文件 ， 在 “项 
目 管 理 器 ”中 双击 即 可 打开 ， 如 图 12-5 所 示 。 


I rq new 
css 




















fonts 
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EN 5-5 


HBuilder 设置 非常 的 人 性 化 ，HBuilder 打开 manifest.json 文件 后 ， 默 认 显示 “可 视 化 








图 ”可 配置 应 用 的 基本 信息 ， 如 图 12-6 所 示 。 


也 可 以 扣 击 窗口 感 部 的 “代码 视图 ”切换 到 代码 视图 ， 进 行 基本 信息 的 配置 。 


应 用 信息 manifest HEE 








it : manifest X 82 RETAN SUI ASSI, SRD EB 不 ,其 他 部 分 需要 通过 App 打 包 才 可 看 到 效果 

















-基本 信息 
whem [mw | 
ESS: |10 | 





[7] debug 模 式 (android 是 否 支 持 日 志 边 出 及 chrome 调 试 ) 


应 用 资源 星 否 解压”@ 不 解压 直接 运行 © 解 庄 资源 后 运行 
-根据 重力 感应 自动 横竖 屏 


Moca 


portrait upside down landscape left landscape right 














应 用 信息 | 图 标 配置 | 启动 图 片 (splash) 配 置 | SDK 配 置 模块 权限 配置 | 代码 视图 


12-6 





AAA on 12-7 所 示 。 


$] manifestjson 58 





3 i 





4 "name": "new",/* 应 用 名 称 ， 程序 桌面 图 标 名 称 */ 
5: "version": { 

6 | | "name": "1.9",/* 应 用 版 本 名 称 */ 

7 SCOdB shan 

8 n 

9 | "description": "",/* 应 用 描述 信息 */ 

107: "icons": { 

TT "72": "icon.png" 

12 } 

13 "launch path": “index-html”,/* 应 用 的 六 口 页 面 ， 默 认为 根 目 录 下 的 index.htm1; 支持 网 络 地 址 ， 必 须 以 http:// 或 https:// 开 头 */ 
1451 "developer": { 

15 "name": "",/* 开 发 者 名 称 */ 





pretforms": ["android", "iPhone", "iPad"] 


"id": “",/* 应 用 的 标识 ,创建 应 用 时 自动 生成 ， 为 手动 修改 */ 


"email": "",/* 开 发 者 邮箱 地 址 */ 
"url": ""/* 开 发 者 个 人 主页 地 址 */ 


205) “Accelerometer”: 

210 "description": "访问 加 速度 感应 器 " 
22 | R 

235; "Audio": { 

24 | i "description": "访问 麦克 风 " 

25 » 

268. “Messaging”: { 

27 | | o0 "description": " 短 彩 邮件 插件 ” 

28 . ons 

293: "Cache": { 

30 : "description": "BIEN ARE" 

31 | }, 

325: "Camera": { 

33 : "description": “访问 摄像 头 " 

34 | hn 

358: "Console": { 

36 | "description": "跟踪 调试 输出 日 志 " 


i 
o 应 用 信息 | 图 标 配置 | 启动 图 片 (splash) 配 置 | SDK 配 置 | 模块 权限 配置 | 代码 视图 
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3. 应 用 信息 











应 用 信息 包括 应 用 的 名 称 、appid、 页 面 入 口 、 版 本 信息 等 。 
应 用 名 称 : APP 安装 后 在 手机 时 面 上 的 快捷 方式 名 称 。 
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新 闻 APP 
appid: HBuilder appid《〈 应 用 标识 )， 在 创建 时 分 配 的 ， 不 可 改 的 标识 ， 可 以 从 云端 进行 
获取 。 
版 本 写 : 即 应 用 的 版 本 号 ， 用 户 可 通过 plus API Cplus.runtime.version). 获取 应 用 的 版 本 
写 ， 需 提交 APP 云端 打包 后 才能 生效 。 
入 口 页 面 : 应 用 局 动 后 显示 的 首页 即 入 口 页 面 ， 默 认为 根 目录 下 的 index.html; 同样 文 
持 网 络 地 址 ， 必 须 是 以 http:// 或 者 是 https:/ 开 头 的 。 
代码 视图 如 图 12-8 所 示 。 
$] manifestjson 23 























2 Lise ["android", "iPhone", "iPad"], 

3 "id": “",/* 应 用 的 标识 ， 创建 应 用 时 自动 生成 匆 手 动 修改 */ 
4 es “new" ,/* 应 用 和 名称， 程序 桌面 图 标 名 称 */ 

5E ee NN 1. 

6 "name": “1.9”,/* 应 用 版 本 名 称 */ 

7 SCOURS San 

8 f> 

9 "description": "",/* 应 用 描述 信息 */ 

105 Icons»: A 

11 "72": "icon.png" 

1271 [s 

13 "launch path": “index.html",/* 应 用 的 六 口 页 面 ， 默 认为 根 目录 下 的 index.html; 支持 网 络 地 址 ， 必 须 以 http: //ekhttps: //A-A*/ 
145 "developer": { 

15 "name": "",/* 开 发 者 名 称 */ 

16 "email": "",/* 开 发 者 邮箱 地 址 */ 

17 "url": “"/* 开 发 者 个 人 主页 地 址 */ 


18 E 





4. 重力 感应 

根据 重力 感应 目 动 横竖 屏 显 示 。 可 以 点 击 选择 相应 的 按钮 表示 设备 文 持 对 应 的 旋转 方 
回 。 重 力 选 择 按 钮 可 以 选择 一 个 或 者 多 个 ， 选 择 多 个 方 各 后， 应 用 根据 重力 感应 按照 指定 的 
方向 显示 页 面 ， 如 网 12-9 所 示 ， 选 中 其 中 的 按钮 ， 表 示 可 以 文 持 四 个 方 癌 显示 页 面 内 容 。 























TST Sa Ree 
[V] portrait | upside down [V] landscape left [V] landscape right 


图 12-9 





代码 视图 如 图 12-10 所 示 。 
根据 重力 感应 日 动 横竖 屏 在 plus 一 distribute 一 orientation 下 进行 配置 : 


"orientation": ["portrait-primary","portrait-secondary"^,"landscape-primary"^,"landscape-secondary"], 


/* 应 用 支持 的 方向 ，portrait-primary: FIFA; portrait-secondary: C BER IS; 
: landscape-primary: 模 屏 正方 同 ; * landscape-secondary: RR 7[*/ 








图 12-10 


5. 图 标 配 置 和 启动 图 标 配 置 
图 标 配 置 如 图 12-11 Aras. 
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目 动 生成 所 有 适用 图 标 
选择 源 图 片 : 选 泽 一 个 大 图 标 ,将 会 自动 压缩 生成 各 种 小 图 标 





推荐 180*180 以 上 的 正方 形 图 形 
远 控 图标 保存 路 径 ; | unpackage/res/icons | 
生成 各 种 分 关 记 图 标 ORRE REIS MEN PARSER 











iPhone EHR 
29°29 58°58 87°87 80°80 57°57 114*114 120*120 180*180 
12-11 


代码 视图 如 图 12-12 Bro. 
(1) iOS 平台 。1iOS 平台 应 用 图 标 配 置 在 plus—distribute—icons—ios 下 进行 配置 : 


"icons": | 
: "dos": f 
| — "prerendered": true，/* 应 用 图 标 是 否 已 经 高 之 处 理 ， 在 1056 及 以 下 设备 上 有 效 */ 
"auto": ""，/* 应 用 图 标 ， ARE: 512x512 ， 用 于 自动 生成 各 种 尺寸 程序 图 标 */ 
"iphone": { 
SNOPMALT Com. /*iPhone3/3GS 程 序 图 标 ， 分辩 率 : 57x57*/ 
"retina": ""，/*iPhone4 程 序 图 标 ， 分辨 率 : 114x114*/ 
| "retina7": ""”，/*iphone4S/5/6 程 序 图 标 ， 分 辨 率 : 120x120*/ 
"retina8": "", /*iPhone6 Plus 程序 图 标 os: 180x180*/ 
| | |  "spotlight-normal": "", /*iPhone3/3GS Spotlight 搜 索 程序 图 标 , DIE: 29x29*/ 
"spotlight-retina": "", /*iPhone4 Spotlight 搜 索 程序 图 标 ，, DIFE: 58x58*/ 
"spotlight-retina7": "", /*iPhone4S/5/6 Spotlight 搜 索 程序 图 标 ， 分 辩 率 : 80x80*/ 
"settings-normal": ""，/*iphone4 设 置 页 面 程序 图 标 ， 分 状 率 : 29x29*/ 
: - "settings-retina": ""，/*iPhone45/5/6 设 置 页 向 程序 图 标 ,， 分 辩 率 : 58x58*/ 
"settings-retina8": "”/*iPhone6Plus 设 置 页 面 程序 图 标 ， 2 PE: 87x87*/ 
| | b 











"normal": ""，/*iPad 普 通 屏 莫 程 序 图 标 , 分 辨 率 : 72x72*/ 

"retina": ""，/*iPad 高 分 屏 程 序 图 标 ， FF: 144x144*/ 

"normal7": "", /*iPad i0S7 程 序 图 标 ， 分辨 率 : 76x76*/ 

"retina7": "", /*iPad i057 高 分 屏 程 序 图 标 , PE: 152x152*/ 
"spotlight-normal": "", /*iPad Spotlight! REFE. DIFE: 50x50*/ 
"spotlight-retina": ""，/*iPad 高 分 屏 Spotlight 搜 索 程序 图 标 ， 分辨 率 : 100x100*/ 
"spotlight-normal7": "",/*iPad i0S7 Spotlight RETE. DFPE: 40x40*/ 
"spotlight-retina7": "",/*iPad i057 高 分 屏 Spotlight 搜 索 程 序 图 标 ， 分辨 率 : 80x80*/ 
"settings-normal": ""”,/*ipad 设 置 页 面 程序 图 标 MIRE: 29x29*/ 
"settings-retina": "”/*ipad 高 分 屏 设置 页 面 程序 图 标 ， 分 辨 率 : 58x58*/ 
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(2) Android 平台 。 如 图 12-13 Prax, Android 平台 应 用 图 标 配 置 在 plus distribute 
icons 一 android 下 进行 配置 : 


"android": { 

| Umdpi": ""，/* 普 通 屏 启 动 图 片 ， 分辨 率 : 240x282*/ 
"ldpi": ""”，/* 太 屏 启动 图 片 ， 分 辨 率 : 320x442*/ 

"hdpi": ""”，/* 高 分 屏 启 动 图 片 ， 分 辨 率 : 480x762*/ 
"xhdpi": ""”，/*726P 高 分 屏 启 动 图 片 DIRE: 720x1242*/ 
"xxhdpi": ""/*1888P 高 分 屏 启动 图 片 ， 分辩 率 : 1080x1882*/ 





[2-13 
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新 闻 APP 
司 动 图 片 配 置 代 码 视图 如 图 12-14 所 示 。 


启动 图 片 (splash) 配 置 
启动 选项 
& 自动 关闭 局 动 界面 © REDDE 下 对 | 2w © 手动 关闭 启动 界 画 





[9i ean ERES 
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(1) iOS ^F. &. iOS 平台 应 用 局 动 图 片 配 置 项 在 plus distribute splashscreen^ ios 下 进 
行 配 置 ， 如 图 12-15 Dra: 


"splashscreen": { 
: "ios": { 

"iphone": { 

| — "default": ""”，/*iphone3 启 动 图 片 选 ， 分 辨 率 : 320x480*/ 

"retina35": ""”，,/*3.5 英 寸 设 备 (iPphone4) 局 动 图 片 ， 分 状 率 : 640x960*/ 
"retina40": "",/*4.0 英寸 设备 (iPhone5/iPhone5s) 启 动 图 片 ， 4 EE: 640x1136*/ 
"retina47": "",/*4.7 英寸 设备 (iPhone6) 启 动 图 片 ， FRR: 750x1334*/ 
"retina55": "",/*5.5 英寸 设备 (iPhone6 Plus) 启 动 图 片 ， 分辩 率 : 1242x2208*/ 
"retina551": ""/*5.5 英寸 设备 (iPhone6 Plus) 横 屏 启 动 图 片 ， 分辨 率 : 2208x1242*/ 











To 
"ipad": { 

"portrait": "", /*iPadERRSIRA, SFPE: 768x1004*/ 

"portrait-retina": ""”,/*ipad 高 分 屏 坚 屏 图 片 分辨 率 : 1536x2008*/ 
"landscape": "", /*iPad RADER, TIRE: 1024x748*/ 
"landscape-retina": ""，/*iPad 高 分 屏 模 屏 启动 图 片 ， 分 辨 率 : 2048x1496*/ 
"portrait7": "", /*iPad i0S7 坚 屏 启动 图 片 ， 分 辩 率 : 768x1024*/ 
"portrait-retina7": "",/*iPad i087 BUEBHEIE , DFE: 1536x2048*/ 
"landscape7": "", /*iPad i057 楷 屏 启 动 图 片 51383: 1024x768*/ 
"landscape-retina7": ""/*iPad i0S7 高 分 屏 楷 屏 启动 图 片 分辨 率 : 2048x1536*/ 


» 
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(2) Android F. Android 平台 应 用 启动 图 片 配置 项 在 plus— distribute splashscreen— 
android 下 进行 配置 ， 如 图 12-16 所 示 : 


"android": { 

|o Umdpi": ""，/* 普 通 屏 启动 图 片 ， 分 辨 率 : 240x282*/ 
"ldpi": ""”，y/* 太 屏 启动 图 片 ， 分 辨 率 : 320x442*/ 

"hdpi": ""，/* 高 分 屏 启 动 图 片 ， APER: 480x762*/ 
"xhdpi": ""，/*728P 高 分 屏 启动 图 片 ， 分 辨 率 : 720x1242*/ 
"xxhdpi": ""/*1886P 高 分 屏 启动 图 片 ， 分 辨 率 : 1080x1882*/ 





12-16 
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6. SDK 配置 和 模块 权限 限制 

在 应 用 中 如 需要 使 用 地 图 、 登 录 鉴 权 、 文 付 、 推 送 、 分 娃 、 统 计 ， 则 需要 在 打包 时 选择 
使 用 第 三 方 插件 ， 并 填写 相关 配置 信息 。 并 对 某 些 模块 进行 权限 设置 。 

T. 云端 打包 

配置 了 这 么 多 之 后 ， 终 于 可 以 开始 打包 了 。HBuilder 默认 是 在 云端 打包 的 ， 也 就 是 需要 
将 你 的 代码 进行 提交 ， 然 后 进行 打包 ， 打 包 完 成 之 后 下 载 打 好 的 包 ， 这 样 的 话 不 管 你 的 电脑 
配置 如 何 ， 只 要 网 速 民 好 束 可 以 很 快 地 打包 完毕 ， 当 然 你 也 可 以 进行 本 地 打包 ， 那 样 就 需要 
Android 环境 和 iOS 环境 ， 不 推荐 。 

其 体 的 选择 : 

(1) 选择 平台 : 选择 Android 或 10S， 或 者 两 者 都 有 。 

(2) 选择 证 书 : 如 末 只 是 目 己 玩 可 以 选择 公用 证 书 ， 但 是 这 样 不 能 发 到 线 上 ， 如 果 要 友 
布 到 线 上 需要 自己 申请 Google 和 Apple 的 证 书 。 

(3) AGNE: 点 击 打包 ， 系 统 会 显示 进度 ， 当 打包 完成 后 会 目 动 下 载 到 本 地 ， 打 开 包 
所 在 文件 夹 束 可 以 使 用 APP T. 
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13.1 
13.2 
13.3 
13.4 
13.5 
13.6 


位 置信 息 获 取 
浏览 右 支 持 情 况 

ISU GA 

HTMLS5 Geolocation API 
构建 应 用 

百度 地 图 API 


位 置信 息 效 取 





在 HTMLS 中 ， 当 请 求 一 个 位 置信 息 时 ， 如 果 用 户 同 意 ， 浏 览 嚣 束 会 返回 位 置信 息 ， 而 
该 位 置信 息 是 通过 文 持 地 理 定位 功能 的 底层 设备 (如 笔记 本 电脑 、 手 机 〉 提 供给 浏览 器 的 。 
位 置信 息 由 纬度 、 经 度 坐 标 和 一 些 其 他 元 数据 组 成 。 例 如 法 国 巴 歼 的 位 置信 息 主要 由 一 对 纬 
度 和 经 度 坐 标 组 成 : 北纬 42”51'36"， 东 经 2” 2024". 

经 纬度 坐标 有 两 种 表示 方式 : 十 进 制 格式 (例如 39.9) 和 DMS (Degree Minute 
Second, HE) 格式 (例如 39° 54'20"). HTMLS Geolocation API 返 回 的 坐标 格式 为 十 进 制 
格式 。 除 了 纬度 和 经 度 坐 标 ，HTMLS Geolocation 还 提供 位 置 坐标 的 准确 度 。 此 外 ， 它 还 会 
提供 其 他 一 些 元 数据 ， 比 如 海拔 、 海 拔 准确 度 、 行 驱 方 向 和 速度 等 ， 具 体 情 况 取 决 于 浏览 峰 

















所 在 的 便 件 设备 。 
位 置信 息 一 般 从 如 下 数据 源 获 得 : 
e IP 地 址 ; 


e 三 维 坐 标 : GPS (Global Positioning System， 全 球 定 位 系统 )、Wi-Fi、 手 机 信号; 

e 用 户 目 定义 数据 。 

它们 各 有 优 和 缺点 ， 为 了 保证 更 高 的 准确 度 ， 许 多 设备 使 用 多 个 数据 源 组 合 的 方式 ， 如 
表 13-1 所 示 。 





表 13-1 
IP 地 址 任何 地 方 都 可 用 在 服务 器 端 处 理 不 精确 (经 常 出 错 ， 一 般 只 能 精确 到 城市 级 ) ,运算 代价 大 
GPS 定位 时 间 长 ， 耗 电量 大 ,室内 效果 差 ,需要 额外 便 件 设备 文 持 
Wi-Fi 精确 ,可 在 室内 使 用 ,简单 、 快 捷 在 乡村 之 类 Wi-Fi. 接 入 点 少 的 地 区 无 法 使 用 
手机 信和 号 相当 准确 ,可 在 室内 使 用 ,简单 、 快 捷 需要 能 够 访问 手机 或 其 modem 设备 
用 户 目 定义 用 户 目 行 输入 可 能 比 目 动 检 测 更 快 可 能 很 不 准确 ， 特 别 是 当 用 户 位 置 变 更 后 


13.2 ”浏览 器 支持 情 ) 


各 浏览 右 对 HTMLS Geolocation 的 文 持 程度 不 同 ， 并 有 是 还 在 不 断 更 独 中 。 好 消 明 是 在 
HTMLS 的 所 有 功能 中 ，HTML5 Geolocation 是 第 一 批 被 全 部 接受 和 实现 的 功能 之 一 ， 相 关 规 
范 已 经 达到 一 个 非常 成 熟 的 阶段 ， 不 会 再 做 太 大 改变 。 

由 于 浏览 句 对 它 的 文 持 程 度 不 同 ， 在 使 用 之 前 最 好 先 检 查 浏览 右 是 合 文 持 HIML5 
Geolocation API。 后 面 将 讲解 如 何 检查 浏览 喜 是 人 否 文 持 此 功能 。 本 书 中 所 有 示例 程序 都 已 
TE Firefox 上 运行 测试 成 功 ， 如 表 13-2 Arar. 
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A 13-2 
浏 览 器 x TR UL 

Firefox 3.5 及 以 上 版 本 支持 
Chrome 在 带 有 Gears 的 第 2 版 Chrome 中 被 支持 

Internet Explorer 通过 Gears 插件 支持 
Opera 在 版 本 10 中 支持 
Safari 在 版 本 4 中 支持 以 实现 在 iPhone 上 可 用 








13.3 ”隐私 


HTML5 Geolocation 规范 提供 了 一 套 保护 用 户 隐私 的 机 制 。 必 须 先 得 到 用 户 的 明确 许 








可 ， 才 能 获取 用 户 的 位 置信 息 。 不 过 ， 从 可 接触 到 的 HTML5 Geolocation 应 用 程序 示例 中 可 
以 看 到 ， 开 发 者 通常 会 鼓励 用 户 共 享 这 些 信息 。 例 如 ， 午 餐 时 间 到 了 ， 如 果 应 用 程序 可 以 让 
用 户 知道 附近 和 餐馆 的 特色 荣 及 其 价格 和 评论 ， 那 么 用 户 就 会 觉得 共享 他 们 的 位 置信 息 是 可 以 
接受 的 。 

因为 位 置 数据 属于 敏感 信息 ， 所 以 接收 到 之 后 ， 必 须 小 心地 处 理 、 存 储 和 重 传 。 如 果 用 
户 没 有 授权 存储 这 些 数据 ， 那 么 应 用 程序 应 该 在 相应 任务 完成 后 立即 删除 它 。 如 果 要 重 传 位 
置 数据 ， 建 议 对 其 进行 加 密 。 


13.4 HTMLS Geolocation API 


本 节 将 详细 介绍 HTMLS Geolocation API 的 使 用 方法 。 

在 调用 HIML5 Geolocation API 函 数 前 ， 需 要 确保 浏览 右 文 持 此 功能 。 当 浏览 吉 不 文 持 
时 ， 可 以 提供 一 些 替 代 文 本 ， 以 提示 用 户 升级 浏览 器 或 安装 插件 〈 如 Gears) 来 增强 现 有 浏 
a] AE o 

检查 浏览 器 文 持 性 ， 代 码 如 下 : 


Toe om el oN 





























If (naviga or geo locaton) 4 
document .gerthlementByld(" support”) inner HIML = "ox 持 HTML5 
Geolocatione "; 
Helsen 
document.getElementById("support").innerHTML = 
"IAM Mae D sce} HTML5 Geolocation ! 建议 升级 浏览 器 或 安装 插件 (如 Gears). "; 
} 
} 


fF HTMLS Geolocation 功能 中 ， 位 置 请 求 有 两 种 : 
e 单 次 定位 请 求 ; 
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e 重复 性 位 置 更 新 请 求 
单 次 位 置 请 求 ， 在 许多 应 用 中 ， 只 检索 或 请 求 一 次 用 户 位 置 即 可 ， 例 如 前 面 提 到 的 午餐 
时 间 到 了 ， 要 查询 用 户 附 近 餐 馆 的 特色 菜 及 其 价格 和 评论 ， 
单 次 定位 请 求 API， 代 码 如 下 。 


JeeCurrenePostevon(uedarelhocatuon, optional handlelogcationError, 























optriona l Ope tons), 


XA pK EE ESAM PY SY EAL. IE BL updateLocation 为 浏览 器 指明 位 
置 数据 可 用 时 应 调用 的 函数 。 获 取 位 置 操 作 可 能 需要 较 长 时 间 才 能 完成 ， 用 户 不 希望 在 检索 
位 置 时 浏览 右 被 锁定 ， 这 个 参数 就 是 异步 收 到 实际 位 置信 息 后 ， 进 行 数据 处 理 的 地 方 。 乞 同 
时 作为 一 个 函数 ， 只 接收 一 个 参数 : 位 置 对 象 position。 这 个 对 和 象 包含 坐标 (coords) 和 一 个 
获取 位 置 数据 时 的 时 间 戳 ， 许 多 重要 的 位 置 数据 都 包含 在 coords 中， 比如: 

e latitude (纬度 ); 

€ longitude (4/2); 

€ accuracy MEME )。 

旦 无 疑问 ， 这 三 个 数据 是 最 重要 的 位 置 数 据 latitude 和 longitude 包含 HTMLS 
Geolocation 服务 测定 的 十 进 制 用 户 位 置 。accuracy 以 m 为 单位 制定 纬度 和 经 度 值 与 实际 位 置 
间 的 差距 。 局 限于 HTML5 Geolocation 的 实现 方式 ， 位 置 只 能 是 粗略 的 近似 值 。 在 呈现 返回 
值 前 请 一 定 要 检查 返回 值 的 准确 上 度 。 如 果 推 存 的 所 谓 “ 附 近 的 ”和 餐馆， 实际 上 要 耗 忱 用 户 几 
个 小 时 的 路 程 ， 那 孢 不 好 了 。 

坐标 可 能 还 包含 其 他 一 些 数据 ， 不 能 保证 浏览 器 对 其 都 文 持 ， 如 果 不 支 持 则 返回 null. 

€ altitude: 海拔 高 度 ， 以 m 为 单位 ; 

€ altitudeAccuracy: 海拔 高 度 的 准确 度 ， 以 mm 为 单位 ; 

€ heading: 行进 方向 ， 相 对 于 正 北 而 言 ; 

@ speed: 速度， 以 m/s 为 单位 。 

updateLocation() 函数 使 用 示例 代码 如 下 。 


















































EUneiongueaaeeoeaenhoneaosnmenonm s 
We 
var longi cude oot on coor de longitude: 


var accuracy — Posion. coords. accuracy: 


document oae rE e mene a a e a = laticude- 

人 

document .getElementByld ("E/E") .innerHTML = accuracy + "XK"; 
} 


可 选 参数 handleLocationError 为 浏览 硕 指 明 出 钳 处 理 函 数 。 位 置信 息 请 求 可 能 因为 一 些 
不 可 控 因 素 失 败 ， 这 时 ， 您 需要 在 这 个 函数 中 提供 对 用 户 的 解释 。 圣 运 的 是 ， 该 API 已 经 定 
义 了 所 有 需要 处 理 的 错误 情况 的 错误 编号 。 错 误 编 号 code 设置 在 错误 对 象 中 ， 错 误 对 象 作为 
error 参数 传递 给 错误 处 理 程 序 。 这 些 错 误 编 号 包括 以 下 内 容 

@ UNKNOWN ERROR (0): 不 包括 在 其 他 错误 编号 中 的 错误 ， 需 要 通过 message 参数 
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Er fein RA HAW a s 
€ PERMISSION DENIED (1): 用 户 拒绝 浏览 器 获得 其 位 置信 息 ; 
e POSITION UNVAILABLE (2): 尝试 获取 用 户 信息 失败 
@ TIMEOUT " 在 options 对 象 中 设置 了 timeout 值 ， 尝 试 获取 用 户 位 置 超时 。 
在 这 些 情况 下 ， 您 可 以 通知 用 户 应 用 程序 运行 出 了 什么 问题 。 
错误 处 理 函 数 代码 如 下 。 


function handleLocationError(error) { 




















switch (error.code) { 
case 0: 
updateStatus ("党 试 获取 您 的 位 置信 息 时 发 生 错 误 : " + error.message); 


break; 





case 1: 
updateStatus ("用 户 拒绝 了 获取 位 置信 息 请 求 。") 


break; 





case 2: 

updateStatus (" 浏 览 囊 无 法 获取 您 的 位 置信 息 。") ; 
break; 

Case 3: 

updateStatus ("获取 您 位 置信 息 超时 。") 

break; 





} 


可 选 参数 options 对 象 可 以 调整 HTMLS Geolocation 服务 的 数据 收集 方式 。 该 对 象 有 三 
个 可 选 参数 。 

€ enableHighAccuracy: 如 果 局 动 访 参数， 浏览 右 会 司 动 HTMLS Geolocation 服务 的 高 
精确 度 模 式 ， 这 将 导致 机 器 花费 更 多 的 时 间 和 资源 来 确定 位 置 ， 应 谨慎 使 用 。 默 认 
值 为 false; 

@ timeout: 单位 为 ms， 告 诉 浏 览 右 获取 当前 位 置信 息 所 允许 的 最 长 时 间 。 如 末 在 这 个 
时 间 段 内 未 完成 ， 束 会 调用 错误 处 理 程序 。 上 默认 值 为 Infinity， 即 无 穷 大 (无 限制 ); 

€ maximumAge: 以 ms 为 单位 ， 表 示 浏 览 句 重新 获取 位 置信 息 的 时 间 间 隅 。 默 认 值 为 
0， 这 意味 兰 浏览 需 每 次 请 求 时 必须 立即 重新 计算 位 置 。 

包含 options 的 更 新 位 章 请 求 代 但 如 下 。 


navigator.geolocation.getCurrentPosition (updateLocation, 
handlebhocatronError, {timeout: 10000} ); 


这 个 调用 告诉 HIML5S Geolocation 当 获 取 位 置 请 求 的 处 理 时 间 超 过 10s Cl0000ms) 时 
触发 错误 处 理 程 序 ， 这 时 ，error code 应 该 是 3. 

重复 性 位 置 更 狐 请 求 : 有 时 候 ， 仪 获取 一 次 用 户 位 置信 息 是 不 够 的 。 比 如 用 户 正 在 移 
动 ， 随 着 用 户 的 移动 ， 页 面 应 该 能 够 不 断 更 新 显示 附近 的 餐馆 信息 ， 这 样 的 信息 才 对 用 户 有 
AX. PZH, HTML5 Geolocation 服务 的 设计 者 已 经 考虑 到 了 这 一 点 ， 应 用 程序 可 以 使 
用 如 下 API 进行 重复 性 位 置 更 新 请 求 ， 当 监控 到 用 户 的 位 置 发 生变 化 时 ，HTML5 
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HTML5 
| ss ea 
Geolocation kA HAH HAHA P BEER BS FFU updateLocation() 函数 处 理 狐 的 数 
据 ， 及 时 通知 用 户 。 
重复 性 位 置 更 狐 请 求 API 代码 如 下 。 


watehneosition(updatelocation oronalnanaoleTmoeanronerrornooionaloo cn 


这 个 函数 的 参数 跟前 面 提 到 的 getCurrentPosition KAM Až PE, AFA 
watchPosition 和 clearWatch 的 使 用 : 














var watchlId-navigator.geolocation.watchPosition (updateLocation, handle 
le EE ee ES I3 T8 EDS 

// 基于 持续 更 新 的 位 置信 息 实现 一 些 功 能 … 

// 保 止 接收 位 置 更 新 消 县 


navigator.geolocation.clearWatch (watchId) ; 


13.5 构建 应 用 


本 市 将 介绍 如 何 用 刚刚 介绍 的 “重复 性 位 置 更 狐 请 求 ” 构 建 一 个 简单 有 用 的 Web. 应 用 
程序 .距离 跟踪 占 。 通 过 此 应 用 程序 可 以 了 解 到 HTML5S Geolocation API 的 强大 之 处 。 

想 要 快速 确定 在 一 定时 间 内 的 行走 距离 ， 通 常 可 以 使 用 GPS 导航 系统 或 计 步 占 这 样 的 专 
业 设 备 。 基 于 HTML5 Geolocation 提供 的 强大 服务 ， 我 们 可 以 创建 一 个 网 页 来 跟 踊 从 网 页 被 
加 载 的 地 方 到 目前 所 在 位 置 所 经 过 的 距离 。 虽 然 它 在 台式 机 上 不 大 实用 ， 但 在 手机 上 运行 是 
非常 理想 的 。 只 要 在 手机 浏览 器 中 打开 这 个 示例 页 和 面 并 授予 其 位 置 访问 的 权限 ， 每 隔 儿 秒 
钟 ， 应 用 程序 束 会 更 狐 计算 走 过 的 距离 。 

在 此 实例 中 使 用 的 watchPosition() 函数 刚刚 在 前 文中 介绍 过 。 每 当 有 新 的 位 置 返 回 ， 束 
将 其 与 上 次 保存 的 位 置 进 行 比 较 以 计算 距离 。 距 离 计 算 使 用 著名 的 Haversine 公式 来 实现 ， 
这 个 公式 能 够 根据 经 纬度 计算 地 球 上 两 点 间 的 距离 。 

Haversine 公式 的 Javascript KEL, ARIUN F- 


























function toRadians (degree) { 
return this * Math.PI / 180; 
| 
Tuneot ron cud amc cubic Morc euet latitude; longitude) | 
// R 是 地 球 半径 (KM) 
Var R = 627157 
var deltaLatitude = toRadians(latitude2-latitudel); 
var deltaLongitude = toRadians (longitude2-longitudel) ; 
latitudel = toRadians(latitudel); 
latitude2 = toRadians(latitude2); 
No 2 s 
Mabhesiun ele mods clc 2) + 
Math.cos(latitudel) * 
Math.cos (Latitude2) * 
Math.sin(deltaLongitude/2) * 
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地 理 位 置 定 位 
Math.sin(deltaLongitude/2); 
Vee se = “PMath atan2 (Math Saoqre(ay Msbhscmp ias 
vear o Gn aA ey 
return d; 


} 


其 中 distance) 函数 用 来 计算 两 个 经 纬度 位 置 间 的 距离 ， 我 们 可 以 定期 检查 用 户 的 位 
置 ， 并 调用 这 个 函数 来 得 到 用 户 的 近似 移动 距离 。 这 里 有 一 个 假设 ， 即 用 户 在 每 个 区 间 上 都 
^ HE I. 

过 滤 不 准 硝 的 位 置 更 新 数据 : 


// WR accuracy 的 值 太 大 ， 我 们 认为 它 不 准确 ， 不 用 它 计 算 距 离 
(Ua 000 
updateStatus ("这 个 数据 太 不 靠 谱 ， 需 要 更 准确 的 数据 来 计算 本 次 移动 距离 。")，; 
TELUEN 


} 


最 后 ， 我 们 来 计算 移动 距离 。 假 设 前 面 已 经 至 少 收 到 了 一 个 准确 的 位 置 ， 我 们 将 更 新 移 
动 的 总 距离 并 显示 给 用 户 ， 同 时 还 存储 当前 数据 以 备 后 面 的 比较 。 


ET 
var cürrentDistance ~ distancel(latitude, longitude, lastLat, lasthong)-; 
document .getElementById(" 本 次 移动 距离 ") .innerHTMI = 

"URUCEEBBHHE. "E currentDistance.toFixed(4) — " Po"; 
totalDistance t= curreni Distance; 
document.getElementByld (" 总 计 移 动 距 离 ") .innerHTMI = 

人 
lastLat = latitude; 
lastLong = longitude; 
updateStatus ("计算 移动 距离 成 功 。"); 

} 


用 这 么 简短 的 不 到 150 行 的 HTML 和 脚本 代码 ， 我 们 就 构建 了 一 个 能 够 持续 监控 用 户 位 
置 变化 的 示例 应 用 程序 ， 儿 乎 完整 地 演示 了 Geolocation API 的 使 用 。 您 也 不 妨 把 它 放 到 您 
支持 地 理 位 置 定位 的 手机 或 移动 设备 上 ， 看 看 一 天 大 概 能 走 多 少 路 吧 ， 这 是 不 是 很 有 趣 呢 ? 























13.6 ”百度 地 图 API 








基于 地 理 位 置 定 位 的 应 用 开发 ， 还 有 一 个 很 有 趣 的 领域 ， 束 是 百度 地 图 的 开放 API 接 
口 ， 利 用 百度 地 图 的 大 众 版 API， 我 们 可 以 制作 包括 全 景 图 展示 、 热 力图 和 个 性 化 地 图 ， 本 
地 检索 、 周 边 检索 、 区 域 检索 、 公 交 检 索 、 交 车 检索 、 实 时 交通 等 有 趣 的 应 用 。 适 当地 选取 
百度 地 图 提供 的 某 个 模块 的 功能 ， 骸 入 到 我 们 目 己 的 页 面 中 ， 会 市 来 很 好 的 用 户 体 验 。 

接 下 来 我 们 简单 介绍 一 下 百度 地 图 API 的 使 用 流程 。 

首先 ,我 们 需要 申请 使 用 百度 地 图 需要 的 密 铀 ， 访 问 http://www.developer.baidu.com/ 
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HTML5 
| 5x5 
map/index.php， 点 击 右上 角 登 录 ， 输 入 我 们 的 百度 账号 ， 登 录 成 功 后 ， 点 击 右上 角 的 API f$ 
制 侣 ， 点 击 创建 应 用 ， 提 交 之 后 点 击 得 看 应 用 ， 找 到 密 钥 。 接 下 来 ， 创 建 任意 HIML 页 面 ， 
在 其 中 引入 百度 的 APIjs 文件 。 

黎 钥 的 使 用 方法 如 下 : 


Kerio a ITE ne: / / cod eyo, STE IG Bos com sol ey. Seal Aes is) 2h 42) 2 T a 

















Gerda, Wavy ac ode T0918 S/n > 

其 中 参数 Vv 为 API 当前 的 版 本 写 ， 目 前 最 狐 版 本 为 1.5。 在 1.2 版 本 之 前 您 还 可 以 设置 
services 参数 ， 以 告知 API 是否 加 载 服 务 部 分 ，true 表示 加 载 ，false 表示 不 加 载 ， 默 认为 true。 

地 图 API 是 由 Javascript 语言 编写 的 ， 您 在 使 用 之 前 需要 通过 <scrip 们 标签 将 API 引用 到 
页 面 中 : 

e 使 用 V1.4 及 以 前 版 本 的 引用 方式 : 


<script src-"http://api.map.baidu.com/api?v-1.4"type-"text/Javascript"»«/script» 


e 使 用 V1.5 版 本 的 引用 方式 : 


< /ek Me eee, 














可 


其 中 参数 v 为 API 当前 的 版 本 号 ， 目 前 最 新 厂 本 为 1.45。 在 12 版 本 之 前 ， 您 还 可 以 设置 
services 参数 ， 以 告知 API 是 合 加 载 服务 部 分 ，true 表 示 加 载 ，false 表示 不 加 载 ， 上 默认 为 true。 

接 下 来 我 们 束 可 以 在 我 们 目 己 的 JS 中 调用 百度 地 图 的 API 了， 大 家 可 以 访问 
http://developer.baidu.com/map/jsdemo.htm#al 2 在 这 个 示例 页 面 中 ， 百 度 为 我 们 提供 了 详尽 的 
示例 。 
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14.1 短信 二 次 开发 平台 简介 














微 信 开发 即 微 信 公 众 平 台 开 发 ， 将 企业 人 信息、 服务、 活动 等 内 容 通 过 微 信和 网 页 的 方式 进 
行 表 现 。 用 户 通 过 重 单 的 设置 ， 束 能 生成 微 信 3G 网 站 ， 通 过 短信 公众 平台 将 企业 品 脾 展示 
给 短信 用 户 ， 可 以 减少 宣传 成 本 ， 建 立 企业 与 消费 者 、 客 户 的 一 对 一 互动 和 沟通 ， 将 消费 者 
接 入 企业 客户 管理 系统 ， 进 行 促销 、 推 广 、 宣 传 、 售 后 等 活动 ， 进 而 形成 了 一 种 线 上 线 下 微 
信和 互动 营销 的 方式 。 

通过 二 次 开发 可 以 将 公众 账 喜 由 一 个 尹 体 型 彰 销 工具 转化 成 捉 供 服务 的 产品 ， 而 一 旦 成 
为 用 户 需 要 的 产品 ， 公 众 账 志 的 营销 功能 便 会 开局。 

微 信 的 核心 是 通信 工具 ， 这 一 工具 属性 将 用 户 牢 牢 地 条 在 了 平 侣 之 上 。 用 户 和 企业 可 以 
非常 方便 地 在 上 和 面 进行 沟通 ， 所 以 微 信 很 目 然 地 就 成 了 企业 的 客户 管理 系统 平台 ， 这 也 给 了 
企业 将 服务 引入 平台 的 机 会 。 事 实 上 ， 除 了 CRM， 很 多 企业 开始 尝试 根据 客户 场景 化 需求 



































引入 和 直接 交易 ， 这 种 方式 在 微 信和 营销 里 不 再 是 隐 驶 撞 痒 的 品 牧 宣传 。 


14.2 ”做 信 二 次 开发 原理 








微 信 二 次 开发 其 实 就 是 将 微 信 服务 器 作 为 一 个 转 友 服务 器 。 当 我 们 的 终 疾 ， 包 括 手机 ， 
平板 发 起 请 求 到 微 信服 务 颖 的 时 候 ， 微 信服 务 器 这 时 会 将 这 个 请 求 转 给 我 们 的 目 定 义 服务 ， 
微 信 提供 了 很 多 的 服务 ， 例 如 : 和 群发 功能 、 目 定义 菜单 、 上 自动 回复 等 免费 服务 。 当 请 求 到 达 
自 定 义 服务 之 后 ， 微 信 会 将 最 终 的 啊 应 反馈 给 用 户 。 

e 通信 的 协议 : HTTP 协议 ; 

@ 数据 的 格式 : XML. 








14.3 ” 微 信 二 次 开发 步 又 








进行 微 信 开放 平台 开发 的 步骤 : 

C1) 要 进行 微 信 二 次 开发 ， 首 先 你 需要 有 微 信 号 ， 所 以 第 一 步 你 必须 有 微 信 开 发 者 账号 。 

在 百度 搜索 微 信 公众 平台 ， 点 击 注册 。 注 意 选择 类 型 时 ， 选 择 订 阅 号 ， 主 体 类 型 选择 个 
人 ,以 及 真实 的 身份 证 信息 ， 如 图 14-1 所 示 。 

(2) 注册 成 功 后 ， 相 当 于 你 现在 是 有 一 个 微 信 公众 号 ， 但 是 微 信 只 提供 一 些 基础 的 服 
务 。 如 果 你 想 拥有 更 多 的 服务 和 功能 ， 你 需要 目 己 进行 开发 ， 微 信 会 给 你 提供 大 量 的 接口 。 
登录 个 人 公众 平台 中 心 ， 选 择 开 发 者 中 心 ， 即 可 成 为 开发 者 。 

(3) 成 为 开发 者 之 后 ， 你 要 进行 二 次 开发 ， 比 如 你 需要 群发 消息 、 自 动 回复 之 类 的 ， 你 
必须 有 自己 的 服务 器 ， 微 信 无 法 给 每 个 用 户 提 供 服务 器 ， 所 以 你 需要 上 自己 去 租用 百度 或 者 其 
他 的 服务 器 ， 在 这 里 我 们 以 百度 为 例 。 

在 百度 上 ， 搜 索 百 度 开 放 云 平台 ， 然 后 注册 百度 开放 云 用 户 。 注 册 成 功 以 后 ， 登 录 百 度 
开放 云 。 然 后 购买 服务 器 ， 找 到 服务 类 别 里 面 的 应 用 引擎 BAE。 在 这 里 你 需要 实名 认证 ， 如 
图 14-2 所 示 。 点 击 认 证 ， 进 行 实 名 认证 。 此 认证 需要 1 一 2 个 工作 日 。 
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微 信 游 戏 开发 

认证 成 功 之 后 ， 你 就 可 以 购买 自己 的 服务 器 了 ， 在 应 用 引擎 里 添加 部 署 。 也 就 是 在 整个 
服务 器 里 ， 建 立 自 己 的 域名 ， 如 图 14-3 所 示 。 


1 基本 信息 2 邮箱 激活 3 迁 反 类 型 4 信息 登记 5 公众 号 信息 





用 户 信 息 登 记 


微 信 公众 平台 致力 于 打 计 真实 、 合 法、 有 效 的 互联 网 千 台 。 为 了 村 好 的 保 尖 你 和 广大 微 
信用 户 的 合法 权益 ,请 你 认真 填写 以 下 登记 信息 ， 


用 户 信息 登记 审核 通过 后 : 
1. 你 可 以 依法 砷 有 本 微 信 公 een ae 


3. 人 39 注 册 信息 将 在 法 和 ~ 允许 的 和 时 内 向 从 信用 户 展示 : 
4. 人 民法 院 、 检 察 院 、 公 安 机 关 每 有 权 机 关 可 向 颖 讯 依 法 调 取 你 的 注册 信息 每 ， 


请 确认 你 的 微 信 公 众 帐 号 主体 类 型 悍 于 政府 、 漂 体 、 企 业 、 丰 他 组 织 或 个 人 ， 并 清 按 照 
对 应 的 类 别 进行 信息 登记 。 点 击 直 看 微 信 公 众 平 台 信 有 息 登记 指引 。 


帐号 类型 TRS 


主体 内 型 如 何 运 择 主 体 尝 型 ? 
政府 p: irs 企业 其 他 给 织 个 人 
个 人 类 型 包括 : 让 自然 人 注册 和 运营 的 公众 帐号 。 暂 不 支持 个 人 进行 微 信 
WE. 
主体 信息 登记 
信息 审核 成 功 后 身份 证 姓名 不 可 修 
改 ; 如 果 名 字 包 合 分 隔 号 “.”， 
WEE. 





身份 证 号 码 | 


请 纺 入 您 的 身份 证 号 码 ， 一 个 身份 
iPS RSH MAES. 


ERES STRESOM, Serm 





注册 后 ， 扫 码 的 微 信 号 将 成 为 该 账号 
运营 者 信息 登记 的 管理 员 微 信号. 
SRRLASERTE Se. 
运营 省 手机 ES 
号 码 请 榜 入 您 的 手机 号 码 , ns 
码 只 能 注册 5 个 公众 帐号 . 


14-1 








r | | 
所 卦 姓名 过 与 身份 证 上 的 姓名 保持 一 至 

* 身份 证 号 : | | 
请 使 用 二 代 身 份 证 ,身份 证 号 为 18 位 
同一 身份 证 号 只 能 认证 一 次 

* 手持 身份 证 照片 : | + 选择 文件 | 
o BESEEIUH. Am Ho SEES ”会考 样式 > 
o 身份 证 为 本 人 持 有 , HAGERMSSSES ， 身份 证 全 部 信息 ( 包括 身份 证 号 、 头 像 ) Sears 
o 照片 未 经 任何 软件 编辑 修改 
o 格式 要 求 jpg、jpeg、png , 不 超过 10MB 

| 


* 身份 证 扫描 (反面 ) : + 选择 文件 | 


请 上 传 身份 证 反面 的 原件 照片 或 彩色 扫描 件 ， 文 字 清晰 可 辨认 ”查看 示例 > 
格式 要 求 jpg、jpeg、png ,不 超过 10MB 


o 


o 
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实战 宝典 
* 名 称 : 








"ERJ : nodejs-web n (?] 


* 域 名 : | 由 小 写字 和 母 和 数字 组 成 ，6~40 个 字符 ， 创 建 后 不 能 修改 -duapp.com 





“代码 版 本 工具 : svn er 


“执行 单元 个 数 : : | 1 + (P 〈 如 果 执 行 单元 配额 不 足 ， 请 通过 工 单 申请 更 多 配额 ) 





执行 单元 套餐 : 内 存 (MB) 64 128 256 512 1024 2048 


需 支付 : ¥0.40/K M smentuinmmed 计 蓝 详细 说 明 
@ mE 百度 应 用 引擎 骤 务 协议 、BAE 域 名 绑 定 服务 协议 
若 涉及 网 站 部 署 服务 ， 需 要 先 备案 后 访问 。 目 前 无 法 受理 山东 、 西 藏 地 区 备案 业务 ， 请 慎重 购买 。 


图 14-3 





在 类 型 里 你 可 以 选择 你 页 面 的 代码 ， 例 如 php. java 和 node.js。 在 版 本 工具 里 ， 你 要 选 
择 本 地 和 服务 器 进行 联系 的 工具 。 
到 这 一 步 ， 服 务 器 建立 完毕 ， 如 图 14-4 所 示 。 








FEE - | [9] 
© APPID/ 名 称 状态 类 型 自动 发 布 资源 数 域名 SVN/GIT 地 址 操作 
口 appid5jo2id33gu [ 正常 php-web 否 1 (修改 ) mszsnn.duapp.com S484) 快捷 发 布 
mszsnn 更 多 操作 v 
© | Zg 启 || me [u] 
图 14-4 


(A) 将 服务 器 和 本 地 建立 联系 

如 栗 在 添加 部 普 的 时 候 ， 选 择 的 服务 右 与 本 地 联系 的 方式 是 SVN， 那 么 陨 需 要 下 载 
tortoiseSVN: http://tortoisesvn.net/downloads.html . 

GUAR AE YS DTS NIN, XE PERSE AS it ASHER AR Jg ae github， 那 么 你 需要 下 载 
github: http://github-for- Windows.en.softonic.com. 

在 这 里 以 SVN 为 例 : KRI svn 以 后 ， 选 择 一 个 文件 来 ， 然 后 右键 选择 SVN 
checkout， 在 URL of repository 文本 框 中 填写 在 部 车 里 SVN/GIT 的 地 址 ， 然 后 点 击 OK， 如 
图 14-5 PAN 

你 会 看 到 文件 夹 里 有 了 一 个 index.php 的 一 个 文件 ， 这 个 文件 是 你 的 服务 器 于 认 打 开 的 
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微 信 游戏 开发 


| O° Checkout im 


Repository 
URL of repository: 
| 
Checkout directory: 
E:\ 新 建文 件 来 





Multiple, independent working copies 


Checkout Depth 


Fully recursive v 


Revision 
@ HEAD revision 


| Show log 
—P co —— MÀ 5 x 
°°’ fk. 


-—À — 























图 14-5 


GO 有 了 目 己 的 服务 器 ， 但 是 要 和 微 信 进行 联系 ， 束 需要 对 微 信 的 服务 器 进行 配置 ， 需 
要 设置 TOKEN， 然 后 和 微 信 进行 对 接 。 所 以 用 户 需 要 下 载 对 接 的 源码 ， 并 且 上 传 到 服务 器 
上 ， 然 后 微 信 和 就 可 以 和 服务 器 建立 联系 ， 如 几 14-6 所 示 。 

URL: 百度 云 平 台 里 的 部 署 域 名 ， 就 相当 于 门牌 号 。 

TOKEN: 束 像 是 钥 电 。 微 信和 服务 器 联系 的 上 暗号。 

ik: 在 这 之 前 需 补 全 目 己 的 基本 信息 ， 至 少 需要 上 传 头像 。 



































群发 功能 配置 项 。 接口 报警 

自动 回复 — = um 

SESEL] 

投票 管理 四 开发 者 ID 

+ 添加 功能 插件 | AppID( 应 用 ID) wxca0d8045465d7b64 
pow | AppSecret( 应 用 密 铀 ) ST FE 
Q 管理 

消息 管理 | 

Hem 服务 器 配置 (未 启用 ) 修改 配置 启用 

素材 管理 | 

| | “启用 并 设置 服务 器 配置 后 ， 用 户 发 给 公众 号 的 消息 以 及 开发 者 需要 的 事件 推送 ,将 被 微 信 转 发 到 该 URL 

«t 推广 | 中 

广告 主 

mar | URL( 服 务 器 地 址 ) 未 填写 
© tat | Token(SR£) 未 填写 

| EncodingAESKey( 消 息 加 解密 密 钥 @) 未 填写 

用 户 分 析 | 消息 加 解密 方式 “明文 模式 

图 文 分 析 

消息 分 析 —— 

接口 分 析 

-一 开发 者 工具 
o 设置 | 

公众 号 设置 | 

am | E1 A 

安全 中 心 | B senmi Ge 公众 平台 测试 帐 ”公众 号 第 三 方 平 

违规 记录 | 开发 者 文 档 具 开发 者 问答 系统 号 台 








FEE 
| E 
Ik] 14-6 
WkB as: 开发 者 工具 里 有 开发 者 文档 ， 打 开 开 发 者 文档 ， 开 发 者 必 谈 一 撤 入 指 两 。 请 话 
细 阅 读 接 入 指南 。 然 后 下 载 PHP 代码 示例 ， 如 图 14-7 所 示 。 
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1. 将 token、timestamp、nonce 三 个 参数 进行 字典 序 排序 
2. 将 二 个 参数 字符 惠 拼 接 成 一 个 字符 起 进 行 sha]1 加 密 
3. 开 点 者 获得 加 密 后 的 字符 索 可 与 signature 对 比 ， 标 识 该 请 求 率 源 于 微 信 
检验 signature 的 PHP 示 例 代 倘 : 

private function checkSignature() 

$signature = $ GET['signature'T; 

$timestamp = $ GET['timestamp']; 

$nonce = $ GET['nonce']; 

$token = TOKEN: 

$tmpArr = array($token, $timestamp, $nonce); 

sort($tmpArr, SORT STRING); 

$tmpStr = implode( $tmpArr ); 

$tmpStr = shal( $tmpStr ); 

if( $tmpStr == $signature )( 

return true: 
lelse{ 


return false: 


} 


PHP CS FER: RE 


图 14-7 


打开 PHP (SNP Zia, ee TOKEN, WE 14-8 所 示 。 


define("TOKEN"，" 在 这 里 填写 你 自己 定义 的 TOKEN"); 


$wechatObj wechatCaLLbackapiTest(); 
$wechatObj->valid(); 





图 14-8 


定义 好 TOKEN, 然 后 将 改动 后 的 文件 复制 到 你 的 SVN 或 者 是 GIT 的 文件 夹 里 ， 并 且 改 
名 为 iIndex.php, 然 后 你 需要 长 传人 宇 你 的 服务 器 ， 石 键 SVN commit， 当 所 有 的 文件 有 绿色 对 勾 
的 标示 的 时 候 ， 表 示 你 的 服务 区 疹 的 文件 和 你 本 地 的 文件 没有 改动 。 然 后 打开 百度 服务 髓 冰 
和 著 ， 会 发现 有 狐 版 本 ， 然 后 点 击 快捷 友 布 ， 当 提示 发 布 成 功 后 ， 这 一 步 束 完成 了 ， 如 图 14-9 
BAAR o 

















=. ~ 区 E 





国 。 APPID/ 名 称 状态 类 型 自动 发 布 资源 数 域名 [2] 


SVN/GIT 地 址 操作 
appid5jo2id33gu e FẸ php-web E 1 (修改 ) mszsnn .duapp.com ”点 击 复制 快捷 发 布 
mszsnn E BER v 
日 
appid5jo2id33g © 未 创建 php-web 否 0 (修改 ) - - EI beta [E] 
mszsnn [Bt] 
8 (we lla oe PS: 部 雪 和 暂停 或 重启 后 本 地 临时 文件 格 被 自动 清理 , 查看 详情 > >) m 











(6) 返回 微 信 开 发 者 中 心 ， 点 击 修 改 服 务 器 配置 ， 在 这 里 配置 TOKEN， 以 及 百度 云 服 
务 器 的 域名 ， 然 后 点 击 提 交 ， 提 示 验 证 成 功 即 可 。 至 此 ， 就 可 以 进行 微 信 平台 的 二 次 开发 
Y, WK] 14-10 Pras. 
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URL http://mszsnn.duapp.com 


必须 以 http:// 开 头 ， 目 前 支持 80 端 口 。 


"m wo 


必须 为 英文 或 数字 , 长度 为 3-32 字 符 。 


什么 星 Token ? 
EncodingAESK | 7rySTNutCEVEldVnJCkJ2I90ICJaTFORGAYalyllfi 43 /4 | 随机 生成 | 
消息 加 密 密 钥 由 43 位 字符 组 成 ， 可 随机 修改 ,字符 范围 为 A-Z , a-z , 0-9. 
什么 是 EncodingAESKey ? 


消息 加 解密 方式 ”请 根据 业务 需要 ,选择 消息 加 和 解密 类 型 ， 启 用 后 棕 立 即 生效 


e 明文 模式 

明文 模式 下 ， 不 使 用 消息 体 加 解密 功能 ,安全 系数 较 低 

PREL 

兼容 模式 下 ， 明 文 、 密 文 将 共存 ,方便 开发 者 调试 和 维护 
安全 模式 GEB) 

安全 模式 下 ， 消 息 包 为 纯 密 文 ， 需 要 开发 者 加 密 和 解密 ， 安全 系数 高 
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144 自动 回复 功能 示例 








wm 功能 自动 回复 
群发 功能 
自动 回复 已 开启 自动 回复 设置 
通过 编辑 内 雁 或 关键 词 规 则 ， 快 速 进行 自动 回复 设置 。 如 具备 开发 衣 
EixEX ER 








Nun T— 消息 自动 回 和 | 关键 词 自动 回复 











"-———————————ÁÁ ———— 








| ^x* ee $ 语音 
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微 信 游戏 开发 





在 配置 好 了 微 信 开 发 所 需要 的 接口 之 后 ， 这 次 我 们 实现 一 个 自动 回复 消息 的 示例 。 
公众 平台 ， 选 择 自 动 回复 ， 如 图 14-11 所 示 。 


(1) 确保 你 已 经 有 资格 进行 微 信 二 次 开发 ， 要 进行 消息 目 动 回复 ， 你 需要 做 的 是 目 定 义 
遇 到 什么 类 型 的 消息 ， 要 进行 目 定 义 回 复 。 比 如 : 被 添加 关注 、 关 键 字 上 自动 回 复 、 消 息 目 动 
器 复 。 在 这 里 我 们 选择 关键 了 学 消 轧 回复 。 
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HTML5 
| ss ea 
规则 名 : 你 所 要 目 定 义 的 目 动 回复 的 名 字 ; 
ABE: 当 用 户 输入 什么 内 容 的 时 候 和 需要 进行 日 动 回 复 ; 
I: 你 目 定 义 的 目 动 回复 的 内 容 。 
在 这 里 示例 内 容 为 : 
Ae XA: 打招呼 回复 ; 
SRE: TRIE: 
SS: 你 好 ! 欢迎 进行 微 信 二 次 开发 。 
如 图 14-12 所 示 。 


十 添加 规则 


规则 1: 打招呼 回复 ^ 








。 规则 名 | 打招呼 回复 
规则 名 最 多 60 个 字 


。 关键 字 添加 关键 字 
。 回复 [| 回复 全 部 
* 加 9$ [Xx 


文字 (0)、 图 片 ()、 语音 (0)、 视频 (0)、 图 文 (0) IM 


图 14-12 
(2) 在 保存 了 之 后 ， 基 本 设 轩 就 已 经 创建 完成 了 。 这 时 候 我 们 模拟 用 户 去 访问 ， 当 然 前 
提 是 需要 用 户 先 关注 本 微 信 公众 号 ， 在 打开 了 对 话 框 之 后 ， 用 户 键 入 “你 好 ”*， 那 么 束 可 以 看 
到 目 动 回复 了 “你 好 ! 欢迎 进行 答 信 二 次 开 友 。” 效 来 如 图 14-13 Bra. 











你 好 sag 


üt 你 好 ! 欢迎 进行 微 信 二 次 开发 。 


图 14-13 
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Eee 
微 信 游 戏 开发 


14.5 fe XT AIK 








作为 最 独 版 的 网 页 协议 标准 ， 在 对 于 游戏 开 友 方面 ，HTMLS 最 大 的 优点 就 是 对 于 现在 
的 智能 移动 终端 设备 的 良好 支持 性 。 为 了 这 一 目的 ，W3C 其 至 专门 成 立 了 DeviceAPI 工作 
组 ， 为 HIMLS 添 加 了 对 智能 移动 设备 例如 GPS 和 各 种 硬件 感应 器 功能 的 API 支持 ， 以 至 于 
让 HTMLS 能 够 在 移动 设备 上 大 放 寞 彩 。 

为 了 开发 微 信 游 戏 ， 你 需要 了 解 的 技术 包括 : JavaScript. HTML. CSS 以 及 移动 终端 的 
相关 知识 。 





14.6 ”做 信 游 戏 推 运 方 式 











在 144 节 介 绍 的 天 于 消息 回复 的 基础 上 ， 实 现 微 信 游 戏 的 推送 ， 选 择 自 定义 的 菜单 回 
复 ， 如 图 14-14 所 示 。 


Howe 自 定义 菜单 icd 


某 单 编辑 中 
@ 菜单 未 辰 布 ， 请 确认 某 单 编辑 完成 后 点 击 “保存 并 发 布 ”同步 到 手机 。 若 停 用 菜单 ， 请 点 击 这 里 








ARIS 删除 菜单 

全 管理 菜单 名 称 mass 

消息 管理 字数 不 超过 4 个 汉字 或 8 个 字母 

APSE 

x 菜单 内 雁 O 发 送 消息 © 跳 转 网 页 
el 推广 订阅 者 点 击 该 子 菜单 会 跳 到 以 下 链接 

广告 主 页 面 地 址 认证 后 才 可 手动 输入 地 址 

流量 主 从 公众 号 图 文 消息 中 选择 
e 统计 

14-14 


(1) 在 申请 成 为 微 信 开发 者 的 时 候 ， 我 们 已 经 具有 了 目 己 的 服务 器 ， 在 编号 完成 游戏 的 
代码 之 后 ， 只 需 将 游戏 提交 在 服务 费 闹 ， 获 取 到 链接 地 址 URL. 

(2) 选择 了 目 定义 菜单 之 后 ， 我 们 可 以 目 定义 菜单 的 名 称 ， 当 然 ， 你 可 以 定义 为 游戏 的 
名 称 。 然 后 选择 跳 转 网 页 ， 只 需要 将 链接 的 URL 地 址 填写 即 可 。 当 访客 选择 此 菜单 ， 即 可 
收 到 推送 的 游戏 。 











14.7 ”像素 乌 游 戏 以 及 布局 





(Flappy Bird》 是 一 球 由 来 日 越 责 的 独立 游戏 开发 者 Dong Nguyen 开发 的 作品 ， 游 戏 于 
2013 年 5 月 24 日 上 线 ， 并 在 2014 年 2 月 爆 红 。 游 戏 中 玩家 必须 控制 一 只 小 乌 ， 路 越 由 各 种 
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HTML5 


EN vus 
不 同 长 度 水 管 所 组 成 的 障碍 ， 如 图 14-15 所 示 。 


| Mes EBRHgd-HLbrxkrlappy bird 
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像素 岛 ， 即 仿 Flappy Bird 游戏 ， 主 要 用 到 的 技术 点 如 下 : 
€ Phaser: 开源 的 HIMLS 2D 洲 戏 开发 框架 ; 

@ HIMLS 中 的 Canvas。 

EGE: 


scale=l. 


任何 缩放 
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<| DOCTYPE HTML> 

«html» 

«head» 

«meta content="yes" name-"APPle-mobile-Web-APP-capable"/» 
«1--BUESEAATIISE IR LREUNIGIEERRS, --> 

«meta content="yes" name-"APPle-touch-fullscreen"/» 

<!--" 添 加 到 主屏 幕 “后 ， 全 屏 显示 --> 

<meta content="black" name="APPle-mobile-Web-APP-status-bar-style"> 
<1 --VE FA EPR ASE AN EZ - > 


<meta content="width=device-width, initial-scale=1.0, maximum- 











0, user-scalable-no" name-"vIEwport" /» 

<!--width: 可 视 区 域 的 宽度 ， 值 可 为 数字 或 天 键 词 device-width 

hea ghic: in 

intial-scale: 页 面 首次 被 显示 是 可 视 区 域 的 缩放 级 别 ， 取 值 1.0 则 页 面 按 实 际 尺 寸 显 示 ， 无 





maximum-scale=1.0，minimum-scale=1.0; 可 视 区 域 的 缩放 级 别 ， 
maximum-scale 用 户 可 将 页 面 放大 的 程序 ，1 .0 将 禁止 用 户 放 大 到 实际 尺寸 之 上 。 
user-scalable: 是 否 可 对 页 面 进行 缩放 ，no 禁止 缩放 --> 

<meta charset="utf-8" /> 

<ticle-fIAPPy 6s title= 

Sie lee 


ERs 
微 信 游戏 开发 
Body, pr dry (mana bombe Ol padding: Or] 
Ganvas{ Margun: 0 auto; } 
/* 1€ phaser PH4I] f Canvas*/ 
</style> 
<script Sre—' 75/phesecr.Min.qs -—/Sscripe 
<!--Phaser 是 一 于 专门 用 于 桌面 及 移动 HTML5 2D WRIT RATA ARIER, --> 
</head> 
<body> 











<div id="game" style="margin: 0px"></div> 
< lt re yam] < /Serio > 

<!-- 具 体 的 游戏 实现 JS--> 

Do 

<7 hem i> 





14.8 ”像素 乌 效 果实 现 


game.js 代码 如 下 : 


vo aae e aaa aea eae a a a e aao aa S a S a 
game.States = {}; // 存 放 state WR 


game.States.boot = function () { 

this.preload = function() { 

if (!game.device.desktop) {// 移 动 设备 适应 
站 
Ehis.scale.forcePortrait = true; 
this.scale.refresh(); 

} 
game.load.image('loading','assets/preloader.gif'); 
^; 

this.create = function()( 
game.state.start('preload'); //Bkf Sv 75 r2; v4 TH] 

^; 

} 


Gemes See CSS eo A 
ES preload rom 2 301 CL 


re elm ceme Ines 2. " loading? \ 3 d^ dB 


££ zx loading HEH sprite 


game.load.setPreloadSprite (preloadSprite) ; 

// 以 下 为 要 加 载 的 资源 

e a e a a a 
game oad m ae ar oana “desets, ground Dg Hull 

me Doa me a 

game oad DY ee a Eea on er nr 
人 
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HTML5 
E c5 


ciens Lolo eroxcabtecrsimcxee (| qortroe: ne » dle S20. 20 o C 7 ol 

gome Tlodi ee 
'assets/fonts/flAPPyfont/flAPPyfont.png', 
'assets/fonts/flAPPyfont/flAPPyfont.fnt'); 

game.load.audio('fly sound', 'assets/flap.wav');// KPI 


game.load.audio('score sound', 'assets/score.wav') ;//f4 WX 








game.load.audio('hit pipe sound', 'assets/pipe-hit.wav'); // 撞 击 管道 的 首 效 
game.load.audio('hit ground sound', 'assets/ouch.wav'); //$&iu rr xx 





game , loacl, umeage ("esc tex", nn s 


( 
geme Load me teles apt, sse iste E. 0s cp ^) £ 
games load mage C see. owes," me omg!) x 
geme em " Score Doar , "am seus ee ia omg") ¢ 
} 

this.create = function() { 

game.state.start('menu'); 


} 
} 


game .States .menu = function() { 

this.create = function() { 

game add Lule rite(0 0, game. widen, game. height, background’) Eee 
IL (eor Oo 1 jas 

game.add.tileSprite(0,game.height- 
12 , Gente aclela, LIZ, Voscotiae |) | SURES SOL (100, 0) 2 aii 

var titleGroup = game.add.group(); //H#ARUranZ 

IE 6) Jae 

Were baird — tiacleccouesenea cat) 10, lotic!) ar ssl ds Ee 

rel rn add riy ) ses ilies 

bird.animations.play('fly',12,true); //4/4R3) 0 

tie dli ERIS r —— oe, 

ertlecrou y ~ 100; 

me wes ele TE t mM 
LUE, true); // 标 题 的 绥 动 动画 

var Dien = 
Game add bPutron (Games wilde) 2ecamesholenn, en omnee 0 / si ted 

game. state.start('play'); 

}); 

opened use EIE S) E 

} 

} 


ereune cs Bees sole om | 
(Cle! idee CS IC EO TE 


Ehnus-bgq ~ Game ado tulesprite (0,07 games width, game height, Dackground'); 
/ /背景 图 
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TALS 
TALS 
TALS 


I oome. velim Ne ECT TIN CIA. 


this 
this 
this 
this 
game 
this 
game 
melanins 


this 
this 
thais 
this 
this 
PE CONE 


this 
ready MF 
this 
this 
this 


this 
game 
game 
game 
^; 

ehis 


if ('this.hasStarted) 


game 
TALON 

game 
null, tnis) s 


ub 


frd [es HE KFT AZ 


.PipeGroup = game.add.group (); 


.pipeGroup.enableBody true; 


Ground game.add.tilesprite(0,game.heright- 


// 地 板 
el game add -prire Ib STU nd 22, 


Dir mma mn elem ae db ya UP 


xac -animations Play fl Ere 

05): 
.physics.enable(this.bird,Phaser.Physics.ARCADE); // 开 局 乌 的 物理 系统 
0; // 乌 的 重力 ,未 开始 游戏 ， 先 先 让 他 不 动 
.physics.enable(this.ground,Phaser.Physics.ARCADE);//3h[8 
// 国 定 不 动 


LE cualolaioue sein Ile: (eS), 


reo body: graviiy.y ~ 


.ground.body.immovable true; 


severe aly Gamezade sound” mily Soundi; 


Sound core Gamewacda. sound scone soundi); 


“SoundHit Pipe game <add sound a ET eom 


neces Ground game Tadd sound (Chit ground coundi, 


~SCOEGTECXE 
UT es) e 


game .add.bitmapText (game.world.centerX-20, 307 


.readyText ganes aC h aegre (Cm wien 2, 40, "esc rex.) 5 /Jgreu 


gom oo e abiere (creme , wacchum 2 5900/7. “ella eg / /提示 点 击 
0); 
0); 


Ol ab 
»Lreadvylext. anchor .serlo (0.5, 


(Olay WL anchor: o LO E 


Miaoetarted / /游戏 是 否 已 开始 


Elim events. LooD(900, 


false; 
this.generatePipes, this); 
.time.events.stop (false); 


input onDown addonce bh sed amens 


. update Emme tom( í 


/ /游戏 未 开始 
-Physics arcadeseol lide(thie bird, this, dqnound, 
/ / Eg Wi oli E 

Physics arcade sOverlap(thrs bird, 


// 与 管道 碰撞 


return; 
this.hitGround, 


ES 


下 


this 


/ / 4) BOS MAL SEU 


-PI peCGroup. fOrEachbhxuses (emus echeckscore, nes 


.StatrGame = function() { 
.gameSpeed = 200; //UUXXERE 
.gameIsOver = false; 
.hasHitGround = false; 
.hasStarted = true; 
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HTML5 


实战 宝典 


false); 
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thus score = 0; 

this .bg.autoscroll(—(this.gameSoeed/10) , 0); 
this groungd autoSseroll( this gameopeed,.0)> 
this.bird.body.gravity.y = 1150; // 鸟 的 重力 
this: readyText: destroy). 

tario- -playlip:-destroyl):; 

ame VOU wn 
game.time.events.start(); 


} 


this.stopGame = function() { 

ues lex SC ol ico OG 

hr oovunm st ons elo lm), 

this JolpeGroup. torkhachixmstes (funce lem ono) 
pipe.body.velocity.x = 0; 

|o Big 有: 
Si 

0 二 ob 
game.time.events.stop (true); 


} 


lass) ae Lye — ie inven on) 

ehir bair Dody velocity = 

game. add. tween (this bird). eo/( angle: 30 OOR 
E E 

enice oundi y es OG 

} 


ea Ee FUN Eron) 

if (this.gamelsOver) return; 

this soundhitPipe play); 
this.gameOver () ; 

} 

ee Cor. On GE et Maer Om) a 

(pais phasis teround) return; LESE sa a 
this.hasHitGround = true; 

this soundit round. play (I; 
this.gameOver (true); 

} 

Chess Gameover Fumesron( snow text) 
this.gamelsOver = true; 
this.stopGame () ; 

ir (chow ce esessnowesanmeeoverexe (LE 


n 


this.showGameOverText = function (){ 


mall, 


true, 


短信 游戏 开发 


有 eeoreTe t destro); 


game.bestScore = game.bestScore || 0; 
re th eor d IEER RU ON 
IMs ucctzoH — cemne eckl.cqretts a 4s ill 724. 

var gameOverText = 


this.gameOverGroup.create (game.width/2,0,'game over'); //game over XTRA 
var scoreboard = 


lias eam Om re | qeme .wacigas 2, TO, " eeose Ixoeeel ) / /分 数 板 


var currentScoreText = game.add.bitmapText (game.width/2 + 60, 105, 
'flAPPy font', this.score+'', 20, this.gameOverGroup); //J5B[42r2X 

var bestScoreText =  game.add.bitmapText(game.width/2 + 60, Toos 
'flAPPy font', game.bestScoret+'', 20, this.gameOverGroup); // RON 

var replayBtn = game.add.button(game.width/2, ZO Dot 


function (){// 重 玩 按钮 
dame State.start( play’); 
人 
ne O venr Wee: . cinch. SezTo(O.5, (0) 5 
seoreboargd mhor. seno DE 
replavetn anchor setlo(0.5 Ol; 
this.gameOverGroup.y = 30; 
} 
mi ener pe “ee Tom (cami, 7 lie = el 
gap = gap || 100; // 上 下 管道 之 间 的 间 队 宽度 
ee me 
SS UI Oa) E oom 
var topPiper = position 300; 


var bottomPipeY = positiont+gap; 
in (EMS. resci Pipe PoDPNpev DOE OMe IDEM) return, 


var  topPipe =- “camer adadssprire (game width, Eee pur cw OF 
this pioSeeroup) | 

var bobttomPrpe = Gamevadd. sprite (gGame.width, bDottomPiper, a oe 1, 
plimscpvrpesroup). 

this plpeGroup. sercAlil( chneckWorlodePoungde Eroe 

his PipPeCroum S tA (T ouUEOftBoungderitl truel.: 

this. pipecroup:setAll( body. velocity x this. eam ee 

} 

this.resetPipe = function (topPipeY,bottomPipeyY) {//BBWSWAN PIE, (el 
回收 利用 

Www 

this pipPpeCroup forhachDead(tftunetion (Pioe)l 

if (pipe.y<=0) { //topPipe 

pipe.reset(game.width, topPipeY); 


HTML5 
Pe kee 


pipe.hasScored = false; //HU BAS 

}else{ 

elpe. ceseu (Game. width, bod Om moe 

j 

pipe.body.velocity.x = -this.gameSpeed; 

LPF g 

eet nues 

return i == 2; // 如 果 i--2 代表 有 一 组 管道 已 经 出 了 边界 ， 可 以 回收 这 组 管道 了 
} 








this.checkScore = function (pipe) {// 负 责 分 数 的 检测 和 更 新 

in pipe Mas Cored Ge plier ny O Se Olle. x = tthe bards x | 354) 
pipe.hasScored = true; 

phucccconele»xwpbcose-c d bhucecoDEC 

this. SOUMG Se Ome = olla. (ie 

rectcurn true; 

| 

return false; 

} 

} 


// 添 加 state 到 游戏 
game.state.add('boot',game.States.boot); 
game.state.add('preload',game.States.preload); 
game.state.add('menu',game.States.menu); 
game.state.add('play',game.States.play); 
game.state.start('boot'); a 


Phaecer minmn Je: 


下 载 地 址 : http:/www.phaser.com/。 
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附录 A: 编辑 工具 简介 
附录 B: HTML5 相关 API 
附录 cC: 相关 开发 环境 的 安装 


HTML5 


附录 A: 编辑 工具 简介 


“ 工 欲 善 其 事 ， 必 先 利 其 器 *， 所 以 一 个 优秀 的 编辑 工具 对 于 开发 工程 师 是 全 关 重 要 的 。 

















编辑 工具 没有 最 好 的 ， 只 有 最 合适 的 ， 对 不 同 的 开发 场景 选择 合适 的 编辑 工具 ， 为 外 还 应 照 
顾 到 个 人 的 使 用 习惯 。 本 书 中 我 们 分 别 使 用 到 了 Sublime Text、WebStorm， 这 两 球 编辑 工具 
功能 强大 、 技 术 先 进 、 各 有 特点 ， 并 且 提 供 了 非 第 清爽 的 用 户 界 面 。 接 下 来 我 们 对 这 两 球 编 
ZESRXETT fn] Z2] 4p 2 o 








A.1 Sublime Text 


A.1.1 Sublime Text 简介 

Sublime Text Zu ds iE ak VA ie) YZ CASS ak, "IDEA Lat Ei 1H. Sublime 
Text 的 最 大 优点 就 是 跨 平 台 ，Mac、Windows 和 Linux 均 可 完美 支持 ， 其 次 是 强大 的 插件 ， 
几乎 无 所 不 能 。Sublime Text 文 持 很 多 种 编程 语言 的 语法 高 之 、 拥 有 完善 的 代 但 目 动 补 全 功 
能 ， 还 拥有 代码 片段 的 功能 ， 可 以 将 名 用 的 代码 片段 保存 起 来 ， 以 供 随 时 调用 。 它 还 文 持 
Vim 模式 ， 可 以 在 Vim RA PARA aa CREST RIN. ESCH, MAA EA H ed Ss 
命令 ， 利 用 目 定 义 命 令 进行 操作 。 

A.1.2 Sublime Text 快捷 键 

Sublime Text 提供 了 完善 的 快捷 键 ， 这 些 快捷 键 能 够 让 用 户 的 开发 效率 倍增 ， 同 时 也 能 
够 更 加 享受 写 代 人 码 的 乐趣 。 接 下 来 分 邵 Sublime Text 中 一 些 常 用 的 快捷 方式 ， 如 表 A-1， 如 
有 错误 之 处 请 批评 指正 。 


























表 A-1 
快 捷 Ou Jj 能 
Xu RR 
Alt+F3 选中 文本 按 下 快捷 键 ， 即 可 一 次 性 选择 全 部 的 相同 文本 进行 同时 编辑 
Ctrl+D 选中 光标 所 占 的 文本 ， 继 续 操 作 则 会 选中 下 一 个 相同 的 文本 
Ctrl+L 选中 整 行 ， 继 续 操作 则 继续 选择 下 一 行 ， 效 果 和 《Shiftt 4) 效果 一 样 
Ctrl+M 光标 移动 至 括号 内 结束 或 开始 的 位 置 
Ctrl+Enter 在 下 一 行 插入 新 行 
Ctrl+Shift+Enter 在 上 一 行 插入 新 行 
Ctrl+Shift+[ 选中 代码 ， 按 下 快捷 键 ， 折 和 登 代 码 
Ctrl+Shift+] 选中 代码 ， 按 下 快捷 键 ， 展 开 代码 
Ctrl+K+0 FEIT Ait Bhs 
Ctrl+ 一 癌 左 单位 性 地 移动 光标 ， 快 速 移动 光标 
Ctrl+ 一 癌 右 单位 性 地 移动 光标 ， 快 速 移动 光标 
Shift+ + 问 上 选中 多 行 
Shift+ | 癌 下 选中 多 行 
Shift+ 一 问 左 选中 文本 
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CBE) 
th 捷 键 Jj 能 
Shiftt— 癌 右 选中 文本 
Ctrl+Shiftt— 向 左 单位 性 地 选中 文本 
Ctrl+Shift+— 向 右 单位 性 地 选中 文本 
编辑 类 
Ctrl+J 合并 选中 的 多 行 代 码 为 一 行 
Ctrl+Shift+D 复制 光标 所 在 整 行 ， 插 入 到 下 一 行 
Ctrl+K+K 从 光标 处 开始 删除 代码 至 行 尾 
Ctrl+Shift+K 删除 整 行 
Ctrl+/ 注释 单行 
Ctrl+Shift+/ 注释 多 行 
Ctrl+K+U 转换 大 写 
Ctrl+Z 撤销 
Tab DIESE 
Shift- Tab In] Ac A aat 
搜索 类 
Ctrl+F 打开 底部 搜索 框 ， 查 找 关 键 字 
Ctrl P 打开 搜索 框 。 中 输入 当前 项 目 中 的 文件 名 ， 快 速 搜索 文件 ; @@ 输 入 “@” 和 关键 字 ， 查 找 文件 中 函 
数 名 ; @@ 输 入“: ”和 数字 ， 跳 转 到 文件 中 该 行 代码 ; 由 输入 “#” 和 关键 字 ， 碍 找 变量 名 
Ctrl+G 打开 搜索 框 ， 输 入 数字 跳 转 到 该 行 代码 
Ctrl+R 打开 搜索 框 ， 输 入 关键 字 ， 查 找 文 件 中 的 函数 名 
Esc 退出 光标 多 行 选 择 ， 退 出 搜索 框 ， 命 令 框 
显示 类 
Ctrl+Tab 按 文 件 浏览 过 的 顺序 ， a 窗口 的 标签 页 
Ctrl+PageDown 问 左 切换 当前 窗口 的 标签 
Ctrl+PageUp 问 右 切换 当前 窗口 的 标签 - 
Alt+Shift+1\2\3 左右 分 屏 -2\3 MJ, BRIA 1 列 


F11 














屏 模式 


A.1.3 Sublime Text 插件 安装 


Sublime Text 提供 了 完善 强大 的 插件 ， 用 户 可 根据 目 己 的 需要 选择 安装 不 同 的 插件 ， 这 
使 得 Sublime Text 功能 强大 义 不 失 轻巧 。 

HAUNT ee 方式 一 : AFR 

安装 Sublime text 3 插件 很 方便 ， 可 以 直接 下 载 安装 

preferences 一 packages )。 

插件 安装 方式 二 : 使 用 Package Control 组 件 安 装 

按 下 《Ctrl+ShifttP〉 调 出 命令 面板 输入 install 调 出 Install Package 选项 并 按 回 车 键 ， 
然后 在 列表 中 选中 要 安装 的 插件 。 





























包 解 压缩 到 Packages 目录 CER 





A.2 WebStorm 


A.2.1 WebStorm 简介 
WebStorm (WAA) 是 一 球 深 受 








受 的 前 站 编 辑 工具 ， 有 “最 强大 的 前 
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广大 开发 着 哥 


HTML5 

BENE 5x5 

int AC LA” ZK. WebStorm 文 持 不 同 浏览 器 的 提示 ， 并 且 提 供 上 自动 补 全 功能 。 标 签 重 
构 、 文 件 重 命名 、CSS 重 构 以 及 JS 重 构 ， 使 用 文件 重 命 名 ， 扎 会 目 动 帮 用 户 更 新 所 有 的 引 
用 。 如 果 你 想 把 内 联 样式 引入 到 CSS 文件 中 ， 也 可 以 通过 重 构 功 能 实现 。WebStorm 实现 了 
对 最 新 技术 的 文 持 ， 内 置 了 对 SASS、nodeJS、angularJS 等 技术 的 文 持 。 连 Emmet 都 进行 了 
内 置 ， 因 此 Sublime Text 中 的 快捷 键 也 同样 支持 。 


A.2.2 WebStorm 快捷 键 





























x A-2 
p 捷 Ou Ij 能 
代码 编辑 
€—— ze 即 可 一 次 性 选择 全 部 的 相同 文本 进 
Alt+[0-9] 快速 拆 合 功 能 界面 模块 
Ctrl+Shift+F12 最 大 区 域 显示 代码 (会 隐藏 其 他 的 功能 界面 模块 ) 
Ctrl+Tab 切换 代码 选项 卡 
Alt+<- 或 -> 切换 代码 选项 卡 
Ctrl+D 复制 当前 行 
Ctrl+W 选中 单词 
Ctrl+<- 或 -> 以 单词 作为 边界 跳 光 标 位 置 
Alt+Insert 新 建 一 个 文件 或 其 他 
Ctrl+Alt+L 格式 化 代码 
Shift+Tab/Tab WD KARE CHI ACERS HP al TARE) 
Ctrl+Y 删除 一 行 
Shift+Enter 重新 开始 一 行 〈 无 论 光 标 在 哪个 位 置 ) 
N 
Esc 进入 代码 编辑 区 域 
Alt+F1 得 找 代码 在 其 他 界面 模块 的 位 置 
Alt+up/down oi bed Wl md WOE YS 
Ctrl+G 光标 到 代码 块 的 前 面 或 后 面 


Ctrl+]/[ 


(etrl+]/[) 


A.2.3 WebStorm 插件 安装 

O 在 主 界面 用 快捷 键 《〈Ctrl+Altts》 打开 settings 界面 ， 左 侧 导 航 栏 里 选中 plugin 项 。 

(2) 选中 plugins 后 ， 会 在 右 侧 列 出 所 有 已 安 闭 的 插件 ， 我 们 要 安 钱 一 个 新 的 插件 ， 因 此 
要 点 击 Browse repositories。 弹 出 的 新 窗口 默认 会 列 出 所 有 的 插件 ， 我 们 在 右上 角 的 搜索 框 输 
DBE HFEF SEAT SIE o 

© 下载 进度 会 显示 在 WebStorm 主 窗 口 底部 的 状态 栏 ， 下 载 完 毕 后 ， 需 要 重 局 
WebStorm 才能 生效 。 
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附 录 


附录 B: HTML5 相关 API 





B.1 3 API 





HTMLS 新 增 了 更 多 丰富 的 表单 控件 ， 例 如 : 搜索 框 、 电 话 号 码 编辑 控件 、URL 编辑 控 
件 、 邮 件 地 址 编辑 控件 。HTMLS5 还 为 客户 端 表单 验证 提供 了 API. 
约束 验证 的 HTML 语法 如 表 B-1 所 示 。 








表 B-1 
属性 /方法 fii BK 
required 指定 该 元 素 必 填 
pattern 限定 元 素 值 必须 匹配 一 个 特定 的 正则 表达 式 
min/max 定 了 能 够 输入 元 素 的 最 大 与 最 小 值 
step 限定 了 输入 值 的 间隔 
maxlength 限制 了 用 户 能 够 输入 的 最 大 字符 数 
type 限制 输入 值 是 否 为 有 效 


约束 验证 的 HTML 语法 

HTMLFormElement 对 象 上 的 checkValidity) 方法 ， 当 表单 的 相关 元 系 都 通过 了 它们 的 
约束 验证 时 返回 true, EURIE] false. 

表单 相关 元 素 如 表 B-2 所 示 。 














表 B-2 
属性 /方法 fii x 
willValidate 如 果 元 素 的 约束 没有 被 符合 则 值 为 false 
validity 是 一 个 ValidityState 对 象 ， 表 示 元 素 当 前 所 处 的 验证 状态 
validationMessage 描述 与 元 素 相 关 约 束 的 失败 信息 
check Validity() 元 素 没 有 满足 它 的 任意 约束 ， 返 回 false， 其 他 情况 返回 true 
setCustomValidity() 置 自 定义 验证 信息 ， 用 于 即将 实施 与 验证 的 约束 来 覆盖 预定 义 的 信息 








目前 任何 表单 元 素 都 有 8 种 可 能 的 验证 约束 条 件 : 

(1) valueMissing: 确 保 控 件 中 的 值 已 填写 。 

FAYE: 将 required 属性 设 为 true, 

<input type="text"required="required"/> 

(2) typeMismatch: 人 确保 控件 值 与 预期 类 型 相 匹 配 。 

用 法 : <input type="email"/> 

(3) patternMismatch: 根 据 pattern 的 正则 表达 式 判 断 输 入 是 耕 为 合法 格式 。 
FAYE: <input type="text" pattern="[0-8]{10!"/> 

(4) toolong: it f/f AW A FIT. 
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用 法 : 设置 maxLength 


—M —M 


«textarea id-" notes" name="notes" maxLength="100"></textarea> 

(5) rangeUnderflow: 限 制 数值 控件 的 最 小 值 。 

用 法 : 设置 min，<input type="number' min="0" value="20"/> 

(6) rangeOverflow: 限 制 数 值 控件 的 最 大 值 。 

用 法 : 设置 max, <input type="number" max="100" value="20"/> 

(7) stepMismatch: 人 确保 输入 值 从 合 min, max. step 的 设置 。 

FAYE: 设置 max min step, <input type="number" min="0" max="100" step="10" value="20"/> 
(8) customError: 处 理应 用 代码 明确 设置 能 计算 产生 错误 。 

用 法 : 例如 验证 两 次 输入 的 密 但 是 否 一 致 。 











B.2 File API 





File API 是 Mozilla 向 W3C 提出 的 一 个 草案 ， 则 在 用 标准 JavaScript API 实现 本 地 文 
件 的 读 取 。File API 将 极 大 地 方便 Web 端的 文件 上 传 等 操作 。 
文件 读 取 函数 如 表 B-3 Pn. 


X B-3 
属性 /方法 fii ” XN 
读 取 文件 内 容 ， 读 取 结 果 为 一 个 binary string。 文 件 每 一 个 byte 会 被 表示 为 一 个 [0，255] 


TORAS ma AEE 区 间 内 的 整数 。 函 数 接受 一 个 File 对 象 作为 参数 
mm EUA, ERARI — IEA TRIGO. EUR UR File 对 象 以 及 文本 编 
码 名 称 作为 参数 
readAsDataURL 访 取 文件 内 容 ， 读 取 结 果 为 一 个 data: 的 URL 


文件 读 取 事件 如 表 B-4 Bron. 




















X B-4 
事件 Hio X 
loadstart 文件 读 取 开 始 时 触发 
loadend sr Se BU] 48 
progress 当 读 取 进 行 中 时 定时 触发 。 事 件 参数 中 会 含有 已 读 取 总 数据 量 
abort 当 读 取 被 中 止 时 触发 
error 当 读 取出 错时 触发 
load 当 读 取 成 功 完 成 时 触发 
loadend 当 读 取 完 成 时 ， 无 论 成 功 或 者 失败 都 会 触发 


B.3 拖 搜 API 





拖 放 允 许 用 户 在 一 个 元 素 上 氮 击 并 按 住 鼠标 投 钮 ， 拖 动 它 到 别 的 位 置 ， 然 后 松 开 忌 标 投 
钮 将 元 系 放 到 指定 的 元 素 。 在 拖 动 操 作 过 程 中 ， 被 拖 动 元 素 会 以 半 透 明 形式 展现 ， 并 跟随 鼠 
标 指针 移动 。 放 置 元 素 的 位 置 可 能 会 在 不 同 的 元 素 内 。 在 进行 拖 放 操 作 的 不 同 阶段 会 触发 数 
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种 事件 。 注 意 ， 在 拖 搜 的 时 候 上 只 会 触发 拖 搜 的 相关 事件 ， 鼠 标 事 件 ， 例 如 mousemove， 是 不 
会 触发 的 。 也 要 注意 ， 当 从 操作 系统 拖 搜 文件 到 浏览 磺 的 时 候 ，dragstart 和 dragend 事件 不 
会 触发 。 

draggable 属性 

想 要 在 某 个 元 素 上 使 用 拖 搜 ， 这 个 元 素 必 须 具 备 dragable 属性 ， 这 个 属性 有 三 个 值 
true, false 或 者 auto. true 表示 可 以 拖 动 ，false 表示 不 能 拖 动 ，auto 表示 根据 浏览 右 的 情况 
目 行 判断 .我 们 给 一 个 div 添加 上 draggable 为 true, 这 个 div 束 可 以 被 拖 动 了 。 

dataTransfer 对 象 


dataTransfer.setData(format,data): 用 于 将 指定 格式 的 数据 赋值 给 dataTransfer 对 象 ,format 
代表 数据 的 类 型 ， 比 如 ，text、url 等 ，data 表示 要 设置 的 数据 。 

dataTransfer.getData(format): setData 对 应 ，getData 用 于 获取 数据 。 

拖 放 相关 事件 如 表 B-S 所 示 。 
































表 B-5 
E 件 Bo xk 
"nme 当 一 个 元 素 开 始 被 拖 搜 的 时 候 触 发 。 用 户 拖 搜 元 素 需 要 附加 dragstart 事件 。 在 这 个 事件 中 ， 监 听 器 将 设 
8 置 与 这 次 拖 搜 相关 的 信息 
— 当 拖 搜 中 的 鼠标 第 一 次 进入 一 个 元 素 的 时 候 触 发 。 这 个 事件 的 监听 器 需要 指明 是 否 允 许 在 这 个 区 域 释放 
鼠标 
dragover 当 拖 搜 中 的 鼠标 移动 经 过 一 个 元 素 的 时 候 触 发 
dragleave 当 拖 搜 中 的 鼠标 离开 元 素 时 触发 。 监 听 器 需要 将 作为 可 释放 反馈 的 高 亮 或 插入 标记 去 除 
drag 这 个 事件 在 拖 搜 源 触 发 
这 个 事件 在 拖 搜 操作 结束 释放 时 于 释放 元 素 上 触发 。 一 个 监听 绒 用 来 响应 接收 被 拖 搜 的 数据 并 插入 到 释 
P 放 之 地 。 这 个 事件 只 有 在 需要 时 才 触 发 
dragend 拖 搜 源 在 拖 搜 操作 结束 将 得 到 dragend 事件 对 象 ， 不 管 操作 成 功 与 否 


B.4 ”客户 端 存 储 API 











客户 奖 存 储存 储 补 设计 为 用 来 提供 一 个 更 大 存储 量 ， 更 安全 ， 更 便捷 的 存储 方法 ,从 而 
可 以 替代 掉 将 一 些 不 需要 让 服务 器 知道 的 信息 存储 到 Cookies 里 的 传统 方法 。 客 户 端 存 储 的 
机 制 是 通过 存储 字符 串 类 型 的 键 / 值 对 ,来 提供 一 种 安全 的 存 取 方 式 。 这 个 附加 功能 的 目标 是 
提供 一 个 全 面 的 ,可 以 用 来 创建 交互 式 应 用 程序 的 方法 。 

localStorage 如 表 B-6 所 示 。 























表 B-6 
属性 /方法 Ho Xx 
window.localStorage TS AUT V a 3 SE 
localStorage.setItem 添加 数据 
localStorage.getItem 获取 数据 
localStorage.removeltem 删除 数据 
localStorage.clear 清除 挥 所 有 的 数据 
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sessionStorage 如 表 B-7 所 示 。 





XA B-7 
属性 /方法 Hi XR 
window.sessionStorage TS AUT bal a TF 
sessionStorage.setItem 添加 数据 
sessionStorage.getItem 获取 数据 
sessionStorage.removeltem 删除 数据 
sessionStorage.clear 清除 挥 所 有 的 数据 


B.S WebSocket API 











WebSocket E — P ERER, SEREH ES s A i BT) FT JE ABS ER 
互 式 通 信 会 话 成 为 可 能 ， 有 了 这 个 API, PRAT EA TH RS ni AIRE J FP EU SEE 2 H HS] IZ, 
无 需 轮 询 服务 器 的 啊 应 。 

WebSocket API 如 表 B-8 所 示 。 








表 B-8 
So d JH — XN 
message 接收 时 间 句 柄 发 来 的 数据 
open 一 个 用 于 连接 打开 事件 的 事件 监听 器 
close XH] WebSocket 连接 或 停止 正在 进行 的 连接 请 求 
send 通过 WebSocket 连接 向 服务 器 发 送 数据 


B.6 Canvas API 


Canvas 是 HTMLS 中 的 新 元 素 ， 你 可 以 使 用 JavaScript 用 它 来 绘制 图 形 、 图 标 以 及 其 他 
任何 视觉 性 图 像 。 它 也 可 用 于 创建 图 片 特 效 和 动画 。 如 果 你 熟悉 的 掌握 这 部 分 API， 你 可 以 
用 Canvas 创建 丰富 的 Web 应 用 程序 。 

画图 环境 : canvas.getContext("2d") 

颜色 、 样 式 和 阴影 如 表 B-9 所 示 。 





X B-9 

属 性 fii X 

fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 
strokeStyle 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 模式 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 

shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形状 的 垂直 距离 
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渐变 如 表 B-10 所 示 。 


AH id 
createLinearGradient() 
createPattern() 
createRadialGradient() 


addColorStop() 


X B-10 


创建 线性 渐变 〔 用 在 画布 内 容 上 ) 








在 指定 的 方向 上 重复 指定 的 元 素 


创建 放射 状 /环形 的 渐变 《用 在 画布 内 容 上 ) 


规定 渐变 对 象 中 的 颜色 和 停止 位 置 


线条 样式 如 表 B-11 所 示 。 


lg 性 
lineCap 
lineJoin 

line Width 


miterLimit 


和 矩形 如 表 B-12 所 示 。 


rect() 
fillRect() 
strokeRect() 


clearRect() 


路 径 如 表 B-13 Br. 


方 法 
fillo 
stroke() 
beginPath() 
moveTo() 


closePath() 


表 B-11 


设置 或 返回 线条 的 结束 端点 样式 


设置 或 返回 两 条 线 相 交 时 ， 所 创建 的 拐角 类 型 


设置 或 返回 当前 的 线条 宽度 





设置 或 返回 最 大 斜 接 长 度 


表 B-12 
描 
创建 矩形 
绘制 “被 填充 ”的 矩形 
绘制 矩形 《无 填充 ) 
在 给 定 的 惩 形 内 清除 指定 的 像素 
X B-13 
描 


填充 当前 绘图 〈 路 径 ) 
绘制 已 定义 的 路 径 


起 始 一 条 路 径 ， 或 重 置 当 前 路 径 


把 路 径 移 动 到 画布 中 的 指定 点 ， 不 创建 线条 


创建 从 当前 点 回 到 起 始点 的 路 径 


BE 


WP x 
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实战 宝典 
CHE) 
Ho d Hi x 
lineTo() 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 
clip() 从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 
quadraticCurveTo() BFE UR UGE Hl Zi 
bezierCurveTo() 创建 三 次 方 贝 塞 尔 曲线 
arc() 创建 弧 /曲线 (用 于 创建 圆 形 或 部 分 圆 ) 
arcTo() 创建 两 切线 之 间 的 弧 / 曲 线 
isPointInPath() 如 果 指 定 的 点 位 于 当前 路 径 中 ， 则 返回 true， 否 则 返回 false 


转换 如 表 B-14 所 示 。 





表 B-14 
Eod 描述 
scale() Zt ACA Bi 22 R E SEC BEL] 
rotate() 旋转 当前 绘图 
translate() 重新 映射 画布 上 的 (0,0) 位 置 
transform() Pe AY i PERO E 
setTransform() 将 当前 转换 重 置 为 单位 官 阵 。 然 后 运行 transform) 
文本 如 表 B-15 所 示 。 
表 B-15 
属 性 ii XN 
font 设置 或 返回 文本 内 容 的 当前 字体 属性 
textAlign 设置 或 返回 文本 内 容 的 当前 对 齐 方 式 
textBaseline 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 
填充 如 表 B-16 所 示 。 
X B-16 
Ao d ii 述 
fillText() 在 画布 上 绘制 “被 填充 的 ”文本 
strokeText() 在 画布 上 绘制 文本 《〈 无 填充 ) 
measureText() 返回 包含 指定 文本 宽度 的 对 象 
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图 像 绘 制 如 表 B-17 所 示 。 





X B-17 
Zr 2 Hi x 
drawImage() 向 画布 上 绘制 图 像 、 画 布 或 视频 
像素 操作 如 表 B-18 所 示 。 
表 B-18 
属 性 a 
width 返回 ImageData 对 象 的 宽度 
height 返回 ImageData 对 象 的 高 度 
data 返回 一 个 对 象 ， 其 包含 指定 的 ImageData 对 象 的 图 像 数据 
createImageData() 创建 新 的 、 空 白 的 ImageData WHR 
getImageData() 返回 ImageData 对 象 ， 该 对 象 为 画布 上 指定 的 矩形 复制 像素 数据 
putImageData() 把 图 像 数据 〈 从 指定 的 ImageData 对 象 ) 放 回 画布 上 
合成 如 表 B-19 所 示 。 
X B-19 
属 性 Hi x 
globalAlpha 设置 或 返回 绘图 的 当前 Alpha 或 透明 值 
globalCompositeOperation 设置 或 返回 新 图 像 如 何 绘制 到 已 有 的 图 像 上 
save() 保存 当前 环境 的 状态 
restore() 返回 之 前 保存 过 的 路 径 状 态 和 属性 


B.7 Audio/Video API 





HTMLS 多 媒体 组 件 指 的 是 Video (视频 ) 组 件 和 Audio 〈 音 频 ) 组 件 。 
Audio/Video 相关 属性 如 表 B-20 PZR. 

















X B-20 
属 性 titi 述 
audioTracks 返回 表示 可 用 音 轨 的 AudioTrackList 对 象 
autoplay 设置 或 返回 是 否 在 加 载 完 成 后 随即 播放 音频 /视频 
buffered 返回 表示 音频 /视频 已 缓冲 部 分 的 TimeRanges 对 象 
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属 人 性 
controller 
controls 
crossOrigin 
currentSrc 
currentTime 


defaultMuted 


defaultPlaybackRate 


duration 
ended 
error 
loop 
mediaGroup 
muted 
networkState 
paused 
playbackRate 
played 
preload 
readyState 


seekable 


titi 述 
返回 表示 音频 /视频 当前 媒体 控制 器 的 MediaController 对 象 
设置 或 返回 音频 /视频 是 否 显 示 控 件 〈 比 如 播放 /暂停 等 ) 


设置 或 返回 音频 /视频 的 CORS 设置 




















返回 当前 音频 /视频 的 URL 

没 置 或 返回 音频 /视频 中 的 当前 播放 位 置 〈 以 秒 计 ) 不 加 单位 
设置 或 返回 音频 /视频 默认 是 否 静 音 

设置 或 返回 音频 /视频 的 默认 播放 速度 

返回 当前 音频 /视频 的 长 度 《〈 以 秒 计 ) 

返回 音频 /视频 的 播放 是 否 已 结束 

返回 表示 音频 /视频 错误 状态 的 MediaError 对 和 象 

设置 或 返回 音频 /视频 是 否 应 在 结束 时 重新 播放 

置 或 返回 音频 /视频 所 属 的 组 合 〈 用 于 连接 多 个 音频 /视频 元 素 ) 
设置 或 返回 音频 /视频 是 否 静 音 

返回 音频 /视频 的 当前 网 络 状态 

设置 或 返回 音频 /视频 是 否 暂 停 

设置 或 返回 音频 /视频 播放 的 速度 

返回 表示 音频 /视频 已 播放 部 分 的 TimeRanges 对 象 

设置 或 返回 音频 /视频 是 否 应 该 在 页 面 加 载 后 进行 加 载 
回音 频 / 视 频 当 前 的 就 绪 状 态 


返回 表示 音频 /视频 可 寻 址 部 分 的 TimeRanges 对 象 


4 




















x 























<= 





返 








Audio/Video 相关 事件 如 表 B-21 所 示 。 


mo d 
abort 
canplay 
canplaythrough 
durationchange 
emptied 
ended 
error 


loadeddata 
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aX B-21 


当 音频 /视频 的 加 载 已 放弃 时 

当 浏览 器 可 以 播放 音频 /视频 时 

当 浏览 器 可 在 不 因 缓冲 而 停顿 的 情况 下 进行 播放 时 
当 音 频 / 视 频 的 时 长 已 更 改 时 

当 目 前 的 播放 列表 为 空 时 

当 目 前 的 播放 列表 已 结束 时 

当 在 首 频 /视频 加 载 期 间 发 生 错 误 时 

当 浏览 器 已 加 载 音 频 / 视 频 的 当前 帧 时 











OF 
loadedmetadata 
loadstart 
pause 
play 
playing 
progress 
ratechange 
seeked 
seeking 
stalled 
suspend 
timeupdate 
volumechange 


waiting 


当 浏 览 器 已 加 载 音频 /视频 的 元 数据 时 

当 浏 览 器 开始 查找 音频 /视频 时 

当 音 频 /视频 已 暂停 时 

当 音 频 / 视 频 已 开始 或 不 再 暂停 时 

当 音 频 /视频 在 已 因 缓冲 而 暂停 或 停止 后 已 就 绪 时 
当 浏 览 占 正在 下 载 首 频 /视频 时 

当 音 频 /视频 的 播放 速度 已 更 改 时 

当 用 户 已 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 
当 用 户 开始 移动 / 跑 跃 到 音频 /视频 中 的 新 位 置 时 
当 浏 览 器 尝试 获取 媒体 数据 ， 但 数据 不 可 用 时 
当 浏 览 器 刻意 不 获取 媒体 数据 时 

当 目 前 的 播放 位 置 已 更 改 时 

当 音 量 已 更 改 时 

当 视 频 由 于 需要 缓冲 下 一 帧 而 停止 

















B.8 History API 


如 表 B-22 所 示 。 


À 法 


history.pushState() 


history.replaceState() 


pushState() 


replaceState() 


B.9 地 理 位 置 


Geolocation API 存在 于 navigator 对 象 中 ， 


Hid 
getCurrentPosition 


watchPosition 


clearWatch 


X B-22 


逐条 地 添加 历史 记录 条 日 
地 修改 历史 记录 条 日 
在 当前 文档 内 创建 和 激活 新 的 历史 记录 条 日 


类 似 于 history.pushState()， 不 同 之 处 在 于 replaceState() 方 法 会 修改 当前 历史 记录 条 目 而 并 非 


创建 新 的 条 目 


API 


表 B-23 


jü 述 


该 方法 有 三 个 参数 ， 第 一 个 参数 是 成 功 获 取 位 置信 息 的 回调 函数 ， 
二 个 参数 用 于 捕获 获取 位 置信 息 出 错 的 情况 ; 








包含 3 个 方法 ， 如 表 B-23 Arm: 


第 三 个 参数 是 配置 项 


它 是 方法 唯一 必需 的 参数 ， 第 


表示 重复 获取 地 理 位 置 ， 相 当 于 将 getCurrentPosition 这 个 方法 利用 setinterval 不 断 执 行 ， 其 他 用 法 
和 参数 使 用 一 样 


用 来 清除 前 一 次 获取 的 位 置信 息 
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HTML5 


EN 实战 宝典 


获取 信息 成 功 之 后 ， 


lg 性 
coords.latitude 
coords.longitude 
coords.altitude 
coords.accuracy 
coords.altitudeAccuracy 
coords. heading 
coords.speed 


timestamp 
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目 动 生成 一 个 包含 返回 地 理 信息 的 position 对 象 如 表 B-24 Brzs 


表 B-24 


纬度 
经 度 
海拔 
位 置 精确 度 
海拔 精确 度 
HH 
速度 
啊 应 的 日 期 /时 间 


Bj 录 


附录 C: ARFERIR 





C.1 Wamp 222 


WampServer 7 —akfE Window 环境 下 集 Apache Web 服务 器 、PHP 解 释 器 以 及 MySQL 
数据 库 的 整合 软件 包 。 使 用 Wamp， 不 需要 开发 人 员 耗 费 太 多 的 时 间 去 配置 环境 ， 可 以 更 加 
专注 开发 。 

(1) 首先 上 Wamp 官网 下 载 Wamp 集成 安装 包 。 

(2) 解压 Wamp 包 ， 解 压 后 会 出 现 一 个 .exe 的 安装 文件 ， 然 后 双击 .exe 文件 进行 安装 ， 
出 现 的 第 一 个 界面 主要 是 一 些 欢迎 信息 。 

(3) 第 二 个 界面 是 Wamp 的 用 户 协 议 信 息 ， 主 要 是 Wamp 的 一 些 使 用 作者 和 使 用 声明 信 
kA, W “Taccept the agreement”， 点 击 Next, Aul C-1 所 示 。 























W Setup - WampServer 2 


License Agreement 


X 
Please read the following important information before continuing. uu 





Please read the following License Agreement. You must accept the terms of this 
agreement before continuing with the installation. 





** WampServer 


by 
Creator : Romain Bourdon 
Maintainer / Upgrade/Roadmap : Herve Leclerc - herve.leclerc@alterway. fr 


GNU GENERAL PUBLIC LICENSE 
Version 2, June 1991 


Copyright (C) 1989, 1991 Free Software Foundation, Inc. v 


© I accept the agreement 
@)I do not accept the agreement 





« Back Next > Cancel 
C-1 


(4) 选择 你 的 安装 路 人 符 ， 如 图 C-2 所 示 。 


© Setup - WampServer 2 


Select Destination Location 


x 
Where should WampServer 2 be installed? iu 





Setup will install WampServer 2 into the following folder. 


To continue, dick Next. If you would like to select a different folder, click Browse. 


Browse... 


Atleast 225.7 MB of free disk space is required. 





C-2 
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HTML5 
实战 宝典 
(50 选择 是 耕 创 建 创 面 快 捷 方式 和 局 动 位 快捷 方式 ， 根 据 需 求 进行 勾 选 ， 如 图 C-3 
PESE 


© Setup - WampServer 2 — 


x 
Select Additional Tasks m) 
Wy 


Which additional tasks should be performed? 


select the additional tasks you would like Setup to perform while installing WampServer 
2, then click Next. 


Additional icons: 
Create a Quick Launch icon 
[_] Create a Desktop icon 


< Back Cancel 


图 C-3 





(6) 确定 安装 信息 ， 点 击 install 进行 安 闭 。 

(7) 等 待 安装 。 

(8) 设置 stmp 和 邮件 信息 ， 这 时 候 可 以 随便 设置 ， 如 果 想 要 修改 的 话 ， 可 以 在 安装 完 
成 后 另行 修改 。 

(9) 安装 完毕 点 击 运 行 。 








C.2 Node 安装 


1. ROR 

(1) 首先 官网 Chttp://nodejs.cn/download/) Fa Node.js Agee, ALPE OR EY FE d 
置 下 载 相应 的 安装 包 。 

(2) 安装 Nodejs， 点 击 下 载 后 的 文件 安装 ， 然 后 点 next， 然 后 选中 同意 安装 协议 ， 然 
后 点 next， 然 后 可 以 日 定义 安装 日 录 默 认 C:\Program Filesnodejs\， 然 后 点 next， 默 认 安 装 全 
部 组 件 然 后 点 next， 然 后 点 击 install 安装 等 每 ， 然 后 点 击 finish 安装 完成 。 注 意 : 将 node 安 
装 目录 添加 进 path 环境 变量 。 

(3) 在 命令 行 cmd 控制 行 输入 : node -v， 探 制 台 将 打印 出 : 相应 版 本 号 ”提示 安装 
成 功 


2. Node.js Express 框架 














(1) Express 人 简介: 

Express 是 一 个 简洁 而 灵活 的 node.js Web 应 用 框架 ,提供 了 一 系列 强大 特性 帮助 你 创建 
各 种 Web YH, FIFE RAY HTTP TH. 

使 用 Express 可 以 快速 地 搭建 一 个 完整 功能 的 网 站 。 

Express 框架 核心 特性 : 
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附录 


可 以 设置 中 间 件 来 啊 应 HTTP 请 求 。 定 义 了 路 由 表 用 于 执行 不 同 的 HTTP. 请 求 动 作 。 
可 以 通过 癌 模 板 传递 参数 来 动态 洽 染 HTML 页 面 。 
(2) 安装 Express: 


S npm install express save 


以 上 命令 会 将 Express 框架 安装 在 当期 日 录 的 node modules 目录 中 ， node modules 
目录 下 会 自动 创建 express 目录 。 下 面 几 个 重要 的 模块 是 需要 与 express HEAR LAREN: 

body-parser - node.js 中 间 件 ， 用 于 处 理 JSON, Raw, Text 和 URL 编码 的 数据 。 
cookie-parser 一 这 就 是 一 个 解析 Cookie 的 工具 。 通 过 req.cookies 可 以 取 到 传 过 来 的 
Cookie， 并 把 它们 转 成 对 象 。 

multer-node.js 中 间 件 ， 用 于 处 理 enctype-"multipart/form-data" (设置 表单 的 MIME 编 
R3») 的 表单 数据 。 








S npm install body-parser --save 
S npm install cookie par- er Save 


> Rpm inotall multer Save 
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>. UNIQUE TECHNOLOGY 


> ES S y M : ZUR eet ` +-+ = / \ = 
3 * UNIQUE LL AMRAH AER ZS FY 


fra: 
hi Fey — see ze 


"t3 | Sie 


ZS FER ARE A] MILF 2013, BAB 
于 山西 太原 。 公 司 是 由 业界 互联 网 技术 专家 共 
同 发 起 成 立 。 优 逸 客 是 国内 互联 网 前 端 开发 实 
训 行 业 的 “ 扫 荒 者 ”， 是 企业 级 产品 设计 “ 方 
案 提 供 商 ”， 是 中 国 UI 职 业 教 育 的 “知名 品 
牌 ”。 公 司 的 互联 网 技术 实 训 体系 是 历时 一 年 
的 深度 调研 并 结合 企业 对 人 才 实 际 需 求 研 发 而 
成 ， 在 此 基础 上 配 以 完善 的 职业 规划 体系 ， 规 
范 的 人 才 培 养 流程 和 标准 ， 从 而 培养 出 互联 网 
高 端 技 术 人 才 . 

经 过 3 年 发 展 ， 公 司 已 先后 在 北京 、 山 西 、 陕 
西 等 区 域 建立 了 互联 网 人 才 实 训 基 地 ， 已 为 我 
国 培养 出 5000 余 名 互联 网 高 端 技 术 人 才 。 在 未 
来 ， 我 们 将 继续 秉承 “专注 、 极 致 、 口 碑 ” 的 
文化 理念 ， 逐 渐 成 长 为 我 国 顶尖 的 互联 网 人 才 
培养 公司 . 


山西 总 部 : 山西 省 太原 市 高 新 区 学 府 街 平阳 路 口 凯 通 大 厦 2 层 
电话 : 0351-7324758 网 址 : www.sxuek.com 


西安 分 公司 : 陕西 省 西安 市 外 事 学 院 南 校区 电信 缴费 大 厅 2 层 
电话 : 029- 87566140 网 址 : www.uekedu.com 


优 逸 客 山西 微 信 二 维 码 优 逸 客 西安 徽 信 二 维 码 








HTML 
Jae ML 


ABBAS SHIMLA SH, WMA AKA, A 
全 面 ， 讲 解 通 俭 ， 适 合 各 层次 的 学 习 者 。 全 书 分 为 14 章 ， 由 浅 
入 深 地 讲解 了 HTML5 的 基本 概念 和 基本 功能 ， 包 括 地 理 位 置 定 
位 、 本 地 存储 、 离 线 存储 、WebSocket. Canvas. 表单 等 . 
对 每 一 个 概念 的 讲解 都 配备 了 恰如其分 的 示例 和 代码 ， 让 读者 
通过 动手 实践 ， 切 身体 会 到 这 些 概念 的 含义 和 价值 。 na 
部 分 结合 实例 深入 讲解 了 HTML5 在 PC 端的 大 放 异 彩 的 功能 
半 部 分 则 深入 讲解 HTML5 在 移动 端的 应 用 开发 知识 ， 系 ace 
论 了 离线 存储 、 本 地 存储 和 HTML5 Canvas 游 戏 等 主题 。 

本 书 适合 各 个 层次 的 前 端 开 发 人 员 学 习 ， 无 论 是 出 于 工作 
南 要 ， 还 是 好 奇 心 的 驱使 ， 只 要 你 想 深 入 理解 HTML5， 本 书 都 
会 让 你 大 有 收获 。 








